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

2022-01-01 19:33:13 阅读：162 来源： 互联网

标签：Vue 匹配 users chapters 003 参数 path Router 路由

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+)?' }
}

标签：Vue,匹配,users,chapters,003,参数,path,Router,路由
来源： https://blog.csdn.net/qq_29689343/article/details/122270027

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9