<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue路由机制--路由传参</title>
</head>
<body>
<div id="app">
<!-- 场景: 如：商品详情。文章详情。
<router-link to="/shops/1">商品详情</router-link>
<router-link to="/shops/2">商品详情</router-link>
<router-link to="/shops/3">商品详情</router-link> -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/user/4">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">
/*
方式1
const User={
template:'<h1>User组件--用户ID:{{$route.params.uid}}</h1>'
} */
//接收参数方式2[开发中使用这种]
//通过{path:'/user/:uid',component:User,props:true}获取参数
/* const User={
props:["uid"],
template:'<h1>User组件--用户ID:{{uid}}</h1>'
} */
//对象接收
const User={
props:["uid","uname"],
template:'<h1>User组件--用户ID:{{uid}},姓名:{{uname}}</h1>'
}
//5.配置路由规则并创建路由实例
var router=new VueRouter({
//所有的路由规则
routes:[
//props:true:表示为当前组件设置为组件传递参数
//{path:'/user/:uid',component:User,props:true}
//静态传参
//{path:'/user/:uid',component:User,props:{uname:'王生'}}
//动态传递参数
{path:'/user/:uid',
component:User,
props:route=>({uname:'王生',uid:route.params.uid}),
}
]
})
const vm=new Vue({
el:'#app',
router:router,//挂载路由实例对象
})
</script>
</html>
