Javascript Vue路由器链接子节点与子节点

我目前正试图让这个东西与Vue路由器一起工作

目标是： 如果单击Nav#1，则应显示包含另一个预选了SubNav#1的路由器链路的组件

我可以让它以这样的方式工作：如果单击Nav#1，就会出现具有SubNav#1的组件，该组件已经具有活动类。问题是导航1中的活动类被删除，无法导航到导航2或导航3。如果我从导航2或导航3点击路由器链接，什么都不会发生

routes.js：

{ 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},
    ]}

+新VueRouter实例中的自定义linkActiveClass

导航组件：

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

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

Nav#1
导航2
导航3

导航1单元内容组件：

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

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

亚纳伏#1
亚纳伏#2

---

当您为

标签上的

to

道具指定一个值时，您就是在指定要到达的路线的确切路径

由于您的所有示例路径都位于

/app

根路径下，因此我不确定这些链接是如何工作的

也就是说，您需要去掉路线路径定义中的

#

标志。当提供Vue路由器的路径时，它会去除

#

符号后的任何内容，并将其保存为

$route.hash

值

因此，请在

to

道具中为

标记使用完整路径名，并删除

符号

---

我认为Nav#1组件中的路由器链路应该有

到=“Nav#1/SubNav#1”

和

到=“Nav#1/SubNav#2”

不幸的是没有。如果我用这个，什么都不管用了。