【Vue Router】003-路由匹配语法

1.3 路由匹配语法

1.3.1 概述

大多数应用程序使用静态路由（如 /news ）和动态路由（如 /books/1 ）就可以满足应用的需求，不过 Vue Router 提供了更加强大的参数匹配能力。要匹配任何内容，可以使用自定义参数正则表达式，方法是在参数后面的圆括号中使用正则表达式。

1.3.2 参数中自定义正则表达式

使用静态部分来区分不同的 URL

当定义一个如 “ :id ” 的参数时，Vue Router 在内部使用正则表达式“ ([^/]+) ”（至少一个不是斜杠 / 的字符）从 URL 中提取参数。假设有 两个路由 /:orderId 和 /:productName ，那么它们将匹配完全相同的 URL ，要想区分它们，最简单的方法就是在路径中添加一个静态部分来区分！

const routes = [
  { path: '/o/:orderId' },
  { path: '/p/:productName ' }
]

限定 orderId 只能是数字

在 orderId 后面的圆括号（ () ）内进行说明！

const routes = [
  { path: '/o/:orderId(\\d+)' },
  { path: '/p/:productName ' }
]

1.3.3 可重复参数

将参数标记为可重复的

可以使用修饰符 “*” （零个或多个）、“+” （一个或多个）将参数标记为可重复的

const routes = [
  // /:chapters -> 匹配 /one、/one/two、/one/two/three 等等
  { path: '/:chapters+' },
  // /:chapters -> 匹配 /、/one、/one/two、/one/two/three 等等
  { path: '/:chapters*' }
]

这将给出一个 params 数组而不是字符串，而且使用命名路由时，也需要传递一个数组，代码如下所示：

// given { path: '/:chapters*', name: 'chapters' },
// 零个或多个
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 结果：/
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// 结果：/a/b

// given { path: '/:chapters+', name: 'chapters' },
// 一个或多个
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 因为 chapters 是空的，这将抛出一个错误

还可以通过 “*” 和 “+” 添加到右边括号后，与自定义正则表达式结合使用

constroutes = {
    // 只匹配数字
    { path: '/:chapters(\\d+)+' },
    { path: '/:chapters(\\d+)*' },
}

1.3.4 可选参数

可以使用 “?” 将参数标记为可选的

const routes = {
    // 匹配 /users 和 /users/posva
    { path: 'users/:userId?' },
    // 匹配 /users 和 /users/100
    { path: 'users/:userId(\\d+)?' }
}