vue.js - 当父路由中的可选参数时，在Vue路由器链接中设置事件类

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

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

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

如何使匹配逻辑忽略所有路由的可选参数，以便添加.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路由器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({
  ...
})

关于vue.js - 当父路由中的可选参数时，在Vue路由器链接中设置事件类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59954135/