第七章 路由 76 路由传参-使用params方式传递路由参数
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <script src="../lib/vue-router-3.0.6.js"></script> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 如果在路由中,使用查询字符串,给路由传递参数,则 不需要修改 路由规则的path属性 --> 17 <router-link to="/login/12/ls">登录</router-link> 18 <router-link to="/register">注册</router-link> 19 20 <router-view></router-view> 21 </div> 22 23 <script> 24 25 var login={ 26 template:'<h1>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h1>', 27 data(){ 28 return{ 29 msg:'123' 30 } 31 }, 32 created(){//组件的生命周期 33 console.log(this.$route.params.id) 34 // console.log(this.$route.query.id) 35 36 } 37 } 38 39 var register={ 40 template:'<h1>注册</h1>' 41 } 42 43 var router = new VueRouter({ 44 routes:[ 45 //:id,这里的:是占位符 46 {path:'/login/:id/:name',component:login}, 47 {path:'/register',component:register} 48 ] 49 }) 50 51 //创建 Vue 实例,得到 ViewModel 52 var vm = new Vue({ 53 el:'#app', 54 data:{ 55 msg:'' 56 }, 57 methods:{}, 58 //router:router 59 router 60 }); 61 </script> 62 </body> 63 </html>