用法参考官网手册动态路由匹配 | Vue Router (vuejs.org)
对于所有id不相同的用户，都使用User组件来渲染，可在路由路径中使用动态路径参数。
完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入vue和vue-router,注意顺序和版本-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p v-for="user in userlist">
{{user.id}}--{{user.name}}----
<<router-link :to="'/user/'+user.id">查看详情</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
//在组件中，匹配到的参数，会放到$route.params中
var User = {
template:'<div><h2>用户详情{{$route.params.id}}</h2></div>'
}
const router = new VueRouter({
routes:[
//动态路径参数，以冒号开头，在url中匹配参数
{path:'/user/:id',component:User}
]
})
var app = new Vue({
el:'#app',
data:{
userlist:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
},
router:router,
}).$mount('#app')
</script>
</body>
</html>运行结果：
点击张三和李四的查看详情，分别如下：
路径参数使用冒号：来标记。当匹配到一个路由时，参数值会被设置到this.$route.params。可以在一个路由中，设置多段路径参数，对应的值都会设置到$route.params中。
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
