模板 v-if="main"，不使用返回 this.$route.path.indexOf('/') === 0 in 计算的“main”

Question

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

<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在侧边栏组件本身

'<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 === '/'

这是示例小提琴