在vue路由中匹配查询参数

Question

有没有办法通过查询参数进行路由？我想搭配以下路线:site.com/?foo=123.我尝试过类似的东西

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

没有成功.

Answer 1

遗憾的是,您无法匹配path路径定义的字符串中的查询参数.

Vue Router使用path-to-regexp,其文档说:

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

您可以使用正则表达式在路径参数上匹配,方法是在参数名称后面的括号中指定正则表达式,如下所示:

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

但是,Vue Router的路由参数不能在查询中.

以下是Vue Router提供的不同路由匹配功能的一些示例.

如果您确实需要检查URL的查询,可以使用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,
}];