<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue路由机制--命名路由</title>
</head>
<body>
<div id="app">
<router-link :to="{name:'user',params:{uid:11,uname:'U1'}}">User1</router-link>
<router-link :to="{name:'user',params:{uid:22,uname:'U2'}}">User2</router-link>
<router-link :to="{name:'user',params:{uid:33,uname:'U3'}}">User3</router-link>
<router-link :to="{name:'user',params:{uid:44,uname:'U4'}}">User4</router-link>
<router-view></router-view>
</div>
</body>
<!-- 1.引入相关文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript">
const User={
props:["uid","uname"],
template:'<h1>User组件--用户ID:{{uid}},姓名:{{uname}}</h1>'
}
var router=new VueRouter({
routes:[
//为了更加方便的表示路由的路径.可以给路由规则起一个别名。
/* 即为“命名路由” */
{
//命名路由
name:'user',
path:'/user/:uname',component:User,props:route=>({uname:route.params.uname,uid:route.params.uid}),
}
]
})
const vm=new Vue({
el:'#app',
router:router,//挂载路由实例对象
})
</script>
</html>
