当某些子路由与父路由重复时，Vue router-link active-class答案

【问题标题】：Vue router-link active-class when some child route duplicates the parent当某些子路由与父路由重复时，Vue router-link active-class
【发布时间】：2020-11-21 08:33:42
【问题描述】：

我有一个路由结构，例如：

{
  path: '/post/'
  component: Post,
  children: [
    {
      path: '/',
      component: Text,
    },
    {
      path: 'text/',
      component: Text,
    },
    {
      path: 'video/',
      component: Video,
    },
  ],
}

重要的是路由/post/text/ 只是/post/（在本例中为根点）的“别名”。此外，路由器配置具有自定义的linkActiveClass 选项，例如带有一些已定义样式的 'act'。

在父模板中，我有带有router-link 的标签：

<ul>
  <li>
    <router-link to="/post/text/">Text</router-link>
  </li>
  <li>
    <router-link to="/post/video/">Video</router-link>
  </li>
</ul>

所以问题是： 当转到/post/ 路线时，最好将 Text 选项卡与该 标记为“活动” act' 类，因为它只是 /post/text/ 的副本（反之亦然）。

我在Vue Router 文档中没有发现任何提及这一点。此类问题如何妥善解决？

提前致谢！

解决方案（TL；DR - 当前不受支持，已在 v4 中修复）

实现这一点的最简单方法 - 使用 route alias prop，例如：

{
  path: 'text/',
  component: Text,
  alias: '/',
},

但是，不幸的是，active-class 还不能与别名一起正常工作。 It has been fixed in Vue Router v4.

【问题讨论】：

标签： vue.js vue-router routerlink

【解决方案1】：

你可以这样做

<ul>
  <li :class="[currentPage.includes('/post/text/') ? 'activeClass' : 'no-active-class']">
    <router-link to="/post/text/">Text</router-link>
  </li>
  <li :class="[currentPage.includes('/post/video/') ? 'activeClass' : 'no-active-class']">
    <router-link to="/post/video/">Video</router-link>
  </li>
</ul>

如果您的标题或浏览器是单个组件，您可以在每个链接中包含所有这些功能，它应该可以正常工作。

注意：当前路径的变量取决于项目的类型和其中的某些设置。

【讨论】：

也许我没有正确理解你的意思，但是标签改变了路线的最后一个组成部分（在 /text 和 /video 之间）。父级保持不变。使用此解决方案，两个链接将同时“活动”。我说的对吗？
@Dev0ps 是的，但是如果您在链接或路由器上，根据您在组件上的订购方式，我想您将有一个组件作为浏览器，在此检查您的当前路线与您在三元运算中指示的路线相同。我已经修改了我的代码，使其更类似于您的情况。
好的，当你准确地访问这个“标签”时很好，但是当我只访问 /post/ 路由时，没有人会处于活动状态，我需要“文本”。那么在第一个<li>我也应该检查当前路由是否以/post/结尾，对吧？
确实，您应该检查每个案例和每个按钮，这样如果资产与您在“包含”功能中指定的路线一致，则始终会激活资产。

【解决方案2】：

使用 Vuex 状态。当每个页面都挂载到选项卡区域时，调用当前页面状态的设置器。并且可以根据状态值给一个active类


<li>
  <div :class="{ 'active': currentPage === 'Text'}">
  <router-link to="text">Text</router-link>></div>
</li>
<li>
  <div :class="{ 'active': currentPage === 'Video'}">
  <router-link to="video">Video</router-link>></div>
</li>

【讨论】：

【解决方案3】：

使用exact-active-class 解决了与您类似的问题。

文档：https://router.vuejs.org/api/#exact-active-class

【讨论】：