Vue路由

1、带参数的动态路由匹配

很多时候，我们需要给匹配模式的路由映射到同一个组件。例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。再Vue Router 中，我们可以再路径中使用一个动态字段来实现，我们称之为 路由参数。

const User = [
    {template: "<p>路由1<p>"}
]
// 这些都会传递给 createRouter 
const routes = [
    // 动态字段以冒号开始
    { path: '/users/:id', component: User},
]

现在就想/users/johnny 和 /users/jolyne 这样的URL都会映射到同一个路由。

路径参数用冒号：标识。当一个路由被匹配时，它的params的值将在每一个组件中以this.$route.params的形式暴露出来。因此，我们可以通过更新 User 的 模板来呈现当前用户ID:

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

你可以在同一个路由中设置有多个路径参数看，他会映射到 $route.params 上的相应字段。例如：

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

 

处理$route.params 之外，$route 对象还公开了其他有用的信息， 如 ￥route.query (如果 URL 中存在参数）、$route.hash 等。你可以在API参考中查看完整的细节。