Vue Router 路由的匹配语法

路由的匹配语法

除了/about这样的静态路由，还有/users/:userId这样的动态路由，Vue Router还可以提供更多方式。

在参数中自定义正则

像:userId这样的参数，内部使用([^/]+)来从URL中提取参数。其中 ^ 非、[] 某个字符规则、+ 等价于{1,} 至少出现一次。

区分两个能匹配完全相同URL的路由

/:orderId和/:productName这两个路由会匹配完全相同的URL，如何区分？

1.在路径中添加一个静态部分

{
      path: '/o/:orderId'
},
{
      path: '/p/:productName'
}

2.关注两个动态段需要的参数类型

例如orderId总是一个数字，而productName可以是任何东西，所以在括号中为参数指定一个自定义的正则

{
        path: '/:orderId(\\d+)'
    }

\\d：\转义，表示数字

可重复的参数

*：匹配0个或多个

例如'/:chapters*'将匹配：/、/one、/one/two等等

+：匹配1个或多个

例如'/:chapters+'将匹配：/one、/one/two、/one/two/three等等

而将参数标记为可重复后(*或+)，将为你提供一个参数数组，而不是一个字符串，且在使用明明路由时也需要你传递一个数组。

this.$router.push({
        name: 'chapters',
        params: {chapters: ['one', 'two']}
})

这样匹配的路由路径为：/one/two

如果路由路径正则为'/:chapters+'，而传递的数组为[]，则会抛出错误，因为至少需要一个params。

可选参数

？：匹配0个或1个

例如'/users/:userId?'将匹配/users、/users/posva

*在技术上也标志着一个参数是可选的，但？参数不能重复，最多1个。