如何在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>