サブルートパスが空のパスのときは常に最初の子ルートをアクティブクラスにします

Question

私はいくつかのリンクを持つメインナビゲーションナビゲーションバーを持っています。ホームページ、つまりルートパス（ '/'）には、ネストされた（子）ルートがあります。

ルート構成ガイド：ルートパス('/')がアクティブなとき

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')のルータ・リンクを作成したいと思いますサブルートパスが空パスある時はいつでも最初の子ルート('in-theaters')意味？

がアクティブなクラスを持っている必要があることを、親パス('/')の子パス('')がアクティブなときrouter-link-activeのクラス。私はどのように行うことができます。

Answer 1

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