每当子路径路径为空路径时，将第一个子路由作为活动类

我有一个包含一些链接的主导航导航栏。在主页，即根路径（'/'）中，我嵌套（子）路线。每当子路径路径为空路径时，将第一个子路由作为活动类

路线CONFIGRATION：

const routes = [ 
    {path: '/', component: HomeMainContent, children: [ 
      {path: '', component: MovieList}, 
      {path: 'in-theaters', component: MovieList}, 
      {path: 'coming-soon', component: ComingSoonList}, 
      {path: 'trailers', component: TrailerList}, 
    ]}, 
    {path: '/about', component: About}, 
    {path: '/contact',component: Contact}, 
];

所以当根路径('/')是积极的，它的子路由器根路径('')被激活。

子组件路由器的模板是这样：

<template> 
    <div id="homeSubMenuWrapper"> 
     <ul id="subMenuList"> 
      <li v-for="menu in menuList"> 
       <router-link class="menuItem" :to="menu.path">{{menu.name}}</router-link> 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       menuList: [ 
        {name: 'IN THEATER', path: '/in-theaters'}, 
        {name: 'COMING SOON', path: '/coming-soon'}, 
        {name: 'TRAILERS', path: '/trailers'}, 
       ] 
      } 
     } 
    } 
</script>

因为，无论是路径('')和（'in-theaters')具有相同的分量，我想提出路径('in-theaters')的路由器链路有类的router-link-active每当孩子路径其父路径('')('/')是有效的。我该怎么办呢？

含义的第一个孩子航线('in-theaters')应该有主动类每当子路线路径为空路径('')。

来源

2017-02-23 Kakar

您可以通过在计算属性中检查$ router和this。$ route来执行各种操作。 – Potray

@Potray谢谢，我会检查它。 – Kakar

有了@ Potray的建议，我最终检查了模板内的$ route.path和子路径。

<template> 
    <div id="homeSubMenuWrapper"> 
     <ul id="subMenuList"> 
      <li v-for="menu in menuList"> 
       <router-link :class="[$route.fullPath ==='/' && menu.path === '/in-theaters' ? 'menuItem router-link-active' : 'menuItem']" :to="menu.path">{{menu.name}}</router-link> 
      </li> 
     </ul> 
    </div> 
</template>

来源

2017-02-23 17:46:43 Kakar

每当子路径路径为空路径时，将第一个子路由作为活动类

回答

相关问题