Question

有没有办法通过查询参数进行路由？我想匹配以下路线：site.com/?foo=123。我尝试过像

这样的事情

{ path: '/\?foo=[\d]*' }

没有成功。

Answer 1

不幸的是，您无法匹配路由定义的path字符串中的查询参数。

Vue路由器使用path-to-regexp，its documentation说：

path-to-regexp返回的RegExp旨在用于路径名或主机名。它无法处理查询字符串或URL片段。

你可以使用正则表达式匹配路由参数，方法是在参数名称之后的括号中指定正则表达式，如下所示：

{ path: '/:foo([\d]*)' },

但是，Vue Router的路线参数不能出现在查询中。

Here are some examples of the different route-matching features Vue Router provides.

如果您确实需要检查网址的查询，可以使用beforeEnter处理程序手动匹配查询，然后重新路由，如果它不是正确的格式：

const routes = [{
  name: 'home',
  path: '/',
  component: Home,
  beforeEnter(to, from, next) {
    if (to.query.foo && to.query.foo.match(/[\d]*/)) {
      next({ name: 'foo', query: to.query });
    } else {
      next();
    }
  }
}, {
  name: 'foo',
  path: '/',
  component: Foo,
}];

在vue路由中匹配查询参数

1 个答案: