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中的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({
  ...
})

Answer 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

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

当父路由中的可选参数时，在Vue路由器链接中设置活动类

2 个答案: