动态路由

路由参数

const routes = [
	// 动态字段以冒号开始
	{ path: '/users/:id', component: ... },
     
	// 匹配 /o/3549
	{ path: '/o/:orderId' },
    
	// 匹配 /p/books
    { path: '/p/:productName' },
   
	// /:orderId -> 仅匹配数字
	{ path: '/:orderId(\\d+)' },
    
	// /:productName -> 匹配其他任何内容
	{ path: '/:productName' },   
 
]
// 确保转义反斜杠( \ )，就像我们对 \d (变成\\d)所做的那样
// 在 JavaScript 中实际传递字符串中的反斜杠字符。





const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

匹配模式	匹配路径	$route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

可重复的参数

• * : 0 个或多个
• + : 1 个或多个
• ? : 0个或1个

const routes = [   
    
	// /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
	{ path: '/:chapters+' },
	
    // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
	{ path: '/:chapters*' },
    
	// 仅匹配数字
    // 匹配 /1, /1/2, 等
	{ path: '/:chapters(\\d+)+' },
	
    // 匹配 /, /1, /1/2, 等
	{ path: '/:chapters(\\d+)*' },

    // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
	{ path: '/user/:id?' },
]

// 给定 { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 产生 /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// 产生 /a/b

// 给定 { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 抛出错误，因为 `chapters` 为空