Vue3嵌套RouterLink在加载时不活动答案

【问题标题】：Vue3 Nested RouterLink is not active on loadVue3嵌套RouterLink在加载时不活动
【发布时间】：2021-12-16 10:29:54
【问题描述】：

我有主要的<RouterView/>，它负责网站的主要导航。现在，其中一条路线也有它的孩子。所以在这个组件中，我创建了另一个<RouterView name="helper"/> - 一个命名的。在路由器内部是这样的：

{
  path: '/foo/:bar',
  name: 'foo',
  meta: { requiresAuth: true, title: 'Foo' },
  component: FooView,
  children: [{
    path: '1',
    name: 'foo-first',
    components: {
      'helper': FooFirst,
    },
  }, {
    path: '2',
    name: 'foo-second',
    components: {
      'helper': FooSecond,
    },
  }],
  props: true,
}

现在，问题出在组件内的RouterLinks 上——只有当我点击它们时，它们才没有加载active class——在此之后它们开始正常运行。代码如下

...
<nav>
<RouterLink
            :to="{ name: 'foo-first', params: { bar: data.bar } }"
            class="px-1 py-4 text-base sm:text-sm"
            active-class="!text-red-600 !border-red-500"
          >
            Foo First
          </RouterLink>
          <RouterLink
            :to="{ name: 'foo-second', params: { bar: data.bar } }"
            class="px-1 py-4 text-base sm:text-sm"
            active-class="!text-red-600 !border-red-500"
          >
            Foo Second
          </RouterLink>
</nav>
...

我正在尝试做的 - 使链接在加载时也变为活动状态，例如，如果我转到 some.site/foo/bar/1，我希望第一个 RouterLink 在加载时变为活动状态。

【问题讨论】：

标签： vue.js vue-router routerlink

【解决方案1】：

事实证明，在RouterLink to 属性中，您不需要传递任何params，因为它们已经在父路由中。一旦我摆脱了它们，它就开始正常工作了。

【讨论】：