⑤. 路由组件传递参数
5>.路由组件传递参数
①. 使用$route.params.id
1.使用$route.params.id
- ①. 图解
②. 代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/user/1">User</router-link> <router-link to="/user/2">User</router-link> <router-link to="/user/3">User</router-link> <router-view></router-view> </div> </body> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> <script> const User={ template:` <!--路由组件中通过$route.params.id 获取路由参数--> <div>User component id: {{$route.params.id}}</div> ` }; const router=new VueRouter({ routes:[ //默认打开页面就能看到User componet id:1 {path:'/',redirect: '/user/1'}, //路由路径参数,以冒号开头 {path:'/user/:id',component:User} ] }); var vm=new Vue({ el:'#app', router }); </script> </html>
②. props的值为布尔类型
2.props的值为布尔类型
- ①. 图解
②. 代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/user/1">User</router-link> <router-link to="/user/2">User</router-link> <router-link to="/user/3">User</router-link> <router-view></router-view> </div> </body> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> <script> const User={ //props:['id'], props:['age','name'], template:` <!--路由组件中通过$route.params.id 获取路由参数--> <!--<div>User component id: {{id}}</div>--> <div>User component id: {{id}} 名字叫:{{name}} 年龄:{{age}}</div> ` }; const router=new VueRouter({ routes:[ //默认打开页面就能看到User componet id:1 {path:'/',redirect: '/user/1'}, //路由路径参数,以冒号开头 //{path:'/user/:id',component:User} //boolean类型 //{path:'/user/:id',component:User,props:true} //对象类型 {path:'/user/:id',component:User,props:{age:24,name:'tangzhi'}} ] }); var vm=new Vue({ el:'#app', router }); </script> </html>
