Vue路由器从孩子链接孩子

Posted 2023-02-22

【中文标题】Vue路由器从孩子链接孩子

【英文标题】：Vue Router Linking Children from Children

【发布时间】：2018-02-15 15:13:13

【问题描述】：

我目前正在尝试让这个东西与 Vue Router 一起工作。

目标是： 如果单击 Nav#1，将出现一个包含另一个 Router-Link 且预选了 SubNav#1 的组件。

我可以让它工作的方式是，如果您单击 Nav#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>

【问题讨论】：

我认为 Nav#1 组件中的路由器链接应该有to="Nav#1/SubNav#1" 和to="Nav#1/SubNav#2"

很遗憾没有。如果我应用这个，就没有任何效果了。

【参考方案1】：

当您在 <router-link> 标记上为 to 属性指定值时，您正在指定要前往的路线的确切路径。

由于您的所有示例路径都在 /app 根路径下，我不确定您是如何让这些链接正常工作的。

也就是说，您需要去掉路由路径定义中的 # 标志。在提供 Vue Router 的路径时，它会删除 # 符号之后的所有内容并将其保存为 $route.hash 值。

因此，在 to 属性中为您的 <router-link> 标签使用完整路径名，并删除 # 符号。

Here's a working fiddle.