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

Question

适用于我的其他路线，如“/dashboard”等，但出现在所有 route 。我基本上希望此模板仅在 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

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