Question

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

{
  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/路由时，文本标签被该'act'类，因为它只是/post/text/的副本（反之亦然）。

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

谢谢！

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

最简单的方法-使用路线alias道具，例如：

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

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

Answer 1

您可以做这样的事情

c:\HashiCorp\Vagrant\embedded\cacert.pem

如果标头或浏览器是单个组件，则可以在每个链接中包含所有此功能，并且应该可以正常工作。

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

Answer 2

使用Vuex状态。装入每个页面的选项卡区域后，请调用setter以获取currentPage状态。您可以根据状态值给一个活动的类


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

Answer 3

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

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

当某些子路由复制父路由时，Vue路由器链接活动类

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

3 个答案: