Vue Router子どもから子どもをリンクする

Question

私は現在、Vue Routerでこの機能を利用しようとしています。

目的は： Nav＃1をクリックすると、SubNav＃1があらかじめ選択された別のルータ - リンクを含むコンポーネントが表示されます。

Nav＃1をクリックすると、すでにアクティブなクラスを持つSubNav＃1のコンポーネントが表示されるようになりました。問題は、Nav＃1のアクティブクラスが削除され、Nav＃2またはN＃3にナビゲートできないことです。新しいVueRouterインスタンスで

{ path: '/app', component: App, 
    children: [ 
     { path: 'Nav#1', component: Nav#1_Content, 
     children: [ 
      { path: 'SubNav#1', component: SubNav#1_Content}, 
      { path: 'SubNav#2', component: SubNav#2_Content} 
     ]}, 
     { path: 'Nav#2', component: Nav#2_Content}, 
     { path: 'Nav#3', component: Nav#3_Content}, 
    ]} 

+カスタムlinkActiveClass：私は...ナビ＃2や＃3何も起こらからルータリンクに

routes.jsをクリックした場合。

ナビゲーションコンポーネント：

<router-link to="Nav#1/SubNav#1">Nav #1</router-link> 
<router-link to="Nav#2">Nav #2</router-link> 
<router-link to="Nav#3">Nav #3</router-link> 

ナビ＃1_Contentコンポーネント：

<template> 
    <div> 
    <nav> 
    <router-link to="SubNav#1" tag="div">SubNav#1</router-link> 
    <router-link to="SubNav#2" tag="div">SubNav#2</router-link> 
    </nav> 
    <router-view></router-view> 
    </div> 
</template> 

Answer 1

あなたは<router-link>タグにto小道具の値を指定すると、あなたは正確に指定しています行こうとする経路の経路。

すべての例のパスは、ルートパス/appの下にあるため、これらのリンクをどのように動作させるかはわかりません。

つまり、ルートパス定義で#記号を取り除く必要があります。 Vue Routerへのパスを提供するときには、#符号の後にあるものを取り除き、$route.hashの値として保存します。

したがって、 'tags and drop the＃'記号にはto小道具のフルパス名を使用してください。

Here's a working fiddle.