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

Question

我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();
  }
});

Answer 1

我通过覆盖默认的 vue 路由器resolve方法得到了它，因为它也用于根据路由router-link查找路由匹配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({
  ...
})