Vue路由器连接儿童的儿童

Question

我目前正在尝试使用Vue Router。

目标是： 如果单击Nav＃1，则应显示包含另一个预选SubNav＃1的Router-Link的Component。

我可以通过单击导航＃1的方式使其工作，出现具有已经激活的类的具有SubNav＃1的组件。问题是Nav＃1中的活动类被删除，无法导航到Nav＃2或N＃3。如果我点击Nav＃2或＃3中的Router-Link没有任何反应......

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>

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

在to标记上指定<router-link>道具的值时，您指定要转到的路线的确切路径。

由于您的所有示例路径均位于/app根路径下，因此我不确定您是如何使这些链接生效的。

也就是说，您需要摆脱路径路径定义中的#符号。在提供Vue路由器的路径时，它会在#符号后删除任何内容，并将其保存为$route.hash值。

因此，请使用to道具中的完整路径名称，以便显示＆＃39; tags and drop the＃。符号。

Here's a working fiddle.