如何解决如何在VUEJS中检测路径以在HTML中使用v-show进行条件处理?
我正在vue中开发我的第一个应用程序,而我在最后一页。 在所有应用程序中,我使用了相同的页眉和页脚,但是在最后一页中,我想用图像替换页眉。 是否有可能获取路径值以在标头组件中设置条件? 我的意图是在标头的组件中,我可以在满足最后一页的路径重合的情况下使用v-show。
这是我的html
<template>
<div>
<div>
<header>
<div class="regular-header" v-show="regularPath">
<img class="logo d-lg-flex d-sm-none" src="../../assets/logoesthima.png">
<div class="logo-group d-lg-none d-sm-flex align-items-center">
<a href="https://www.testing.es/">
<img class="icon-logo" src="../../assets/logo.png">
<img class="text-logo" src="../../assets/text.jpg">
</a>
</div>
</div>
<div class="final-header" v-show="!regularPath">
<img class="full-header" src="../../assets/finalheader.png>
</div>
</header>
</div>
</div>
</template>
这是我的剧本
<script>
export default {
data: function () {
return {
regularPath: true
}
},computed: {
auth () {
return this.$store.getters.isAuthenticated
}
},methods: {
onLogout() {
this.$store.dispatch('logout')
}
}
}
</script>
如果有人可以给我一个实现目标的想法。 非常感谢您的时间和帮助
解决方法
是的,您可以使用computed
属性
<script>
export default {
computed: {
isRegularPath() {
return this.$route.name === 'yourroutename'
},},}
</script>
然后仅在模板内使用
<template>
<div>
<div>
<header>
<div class="regular-header" v-if="isRegularPath">
code...
</div>
<div class="regular-header" v-else>
other code...
</div>
</header>
</div>
</div>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。