每當子路徑路徑爲空路徑時，將第一個子路由作爲活動類

我有一個包含一些鏈接的主導航導航欄。在主頁，即根路徑（'/'）中，我嵌套（子）路線。每當子路徑路徑爲空路徑時，將第一個子路由作爲活動類

路線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

每當子路徑路徑爲空路徑時，將第一個子路由作爲活動類

回答

相關問題