当父路由中的可选参数时，在 Vue router-link 中设置活动类答案

【问题标题】：Set active class in Vue router-link when optional param in parent route当父路由中的可选参数时，在 Vue router-link 中设置活动类
【发布时间】：2020-05-14 04:28:16
【问题描述】：

我在所有路由路径的开头都有一个可选的lang 参数，例如/:lang?/foo。

当我在 router-link 中使用 foo 路由传递 lang 参数时，它匹配该路由并正确地将 .router-link-active 类添加到 <a/>。

但是，在我的项目的许多地方，我没有向router-link 传递任何参数，而在全局路由器导航保护beforeEach 中，如果没有人通过，我将设置lang 参数。在这种情况下，router-link 不会添加活动类，因为它与路由不匹配，因为 to 属性中缺少参数。

如何让匹配逻辑忽略所有路由的可选参数，以便添加 .router-link-active 和 .router-link-exact-active 类？

这是我玩过的jsfiddle，我希望第一个链接是红色的。

以下是相关部分：

  <router-link :to="{name: 'foo'}">/foo</router-link>
  <router-link :to="{name: 'foo', params: {lang: 'en'}}">/en/foo</router-link>

routes: [
  {
    path: '/:lang?',
    component: {
      render(c) {
        return c('router-view');
      },
    },
    children: [
      {
        name: 'foo',
        path: 'foo',
        component: Foo
      }
    ]
  }
]

router.beforeEach((to, from, next) => {
  if (!to.params.lang) {
    const route = { ...to };
    route.params = { ...route.params, lang: 'en'};
    next(route);
  } else {
    next();
  }
});

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我通过覆盖默认的 vue 路由器 resolve 方法得到它，因为它也是 router-link 中的 used 用于根据 to 路由查找路由匹配。

所以这是解决我问题的代码：

import VueRouter from 'vue-router';

class Router extends VueRouter {
  resolve(to, current, append) {
    const route = { ...to };
    route.params = { ...route.params, language: 'en' };
    return super.resolve(route, current, append);
  }
}

Vue.use(Router);

const router = new Router({
  ...
})

【讨论】：

【解决方案2】：

我刚刚遇到了同样的问题，看起来有更好更简单的解决方案。

看起来您可以将路径的一部分设为可选，而不仅仅是参数。看看最后一个路由示例HERE。

我刚刚试了一下，它按预期工作。

这实际上是在官方文档中提到的，但只是作为“在此处查看更多详细信息”信息，然后将您带到我在上面发布的链接。

查看"Advanced Matching Patterns"。

警告

这种方法的唯一问题是 URL 没有填充参数。例如如果您像这样创建路线

{
    path: '(user/:userId/)?settings',
    name: 'UserSettings',
    component: UserSettingsComponent,
}

然后你尝试用它路由到它

<router-link :to="{ name: 'UserSettings', params: { userId: '123-456-789' } }">
    Go to user settings
</router-link>

您的网址将如下所示

http://www.yourdomain.com/settings

如果您需要刷新或向某人发送链接，这是一个问题。

【讨论】：

【解决方案3】：

我通过这种方式找到了解决方案

<router-link :to="{ name : 'application', params : {sectorId: 1}}" class="menu-link" :class="[{'router-link-active active': $route.name === 'application'}]" >

也可以与 indexOf 一起使用

  <router-link :to="{ name : 'application', params : {sectorId: 1}}" class="menu-link" :class="[{'router-link-active active': $route.path.indexOf('application') > -1 }]" >

【讨论】：