模板 v-if="main"，不适用于 return this.$route.path.indexOf('/') === 0 in computed "main"

Question

适用于我的其他路线，如“/dashboard”等，但出现在所有路线中。我基本上希望此模板仅在 url 为“/”时出现。在我的整个项目中都尝试过，但 plum 不起作用。请帮忙，谢谢！任何建议。

<template v-if="main">
  <div id="accordion-nav">
    <div class="accordion-panels">
      <a href="/dashboard">Dashboard <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
    <div class="accordion-panels">
      <a href="/shifts">Shifts <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
    <div class="accordion-panels">
      <a href="/other">Other <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'accordion-nav',
  computed: {
    main: function () {
      return this.$route.path.indexOf('/') === 0
    }
  }
}
</script>

<style scoped>
</style>

Answer 1

使用 v-if="main" 作为方法 v-if="main()" 而不是计算属性

methods: { main: function () { return this.$route.path.indexOf('/') === 0 }

与计算属性相比，方法可以更好地完成此类复杂的更新。计算=懒惰

Answer 2

在边栏组件本身中设置 v-if

'<template>
  <div id="sidebar" class="sidebar"
    :class="{ isOpen: isOpen }">
     <div class="sidebar-opener"
        @click="toggle">{{openerText}}</div>
     <accordion-nav v-if="main"></accordion-nav>
     <accordion></accordion>
   </div>
</template>'

<script>
export default {
  data () {
    return {

        }
  },
  computed:{
      main(){
          return this.$route.path === '/'
      }
  }
}
</script>

使用 this.$route.path 你会得到一个字符串，它等于当前路由的路径，在你的应用程序的任何组件中解析为绝对路径。所以你可以使用它来检查你是否在根路由中：

this.$route.path === '/'

这是example fiddle

模板 v-if="main"，不适用于 return this.$route.path.indexOf('/') === 0 in computed "main"

template v-if="main", not working with return this.$route.path.indexOf('/') === 0 in computed "main"

vue.js

vue-router