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?id=10&name=zs">登录</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.query.id}}---{{$route.query.name}}</h1>', 27 data(){ 28 return{ 29 msg:'123' 30 } 31 }, 32 created(){//组件的生命周期 33 // console.log(this.$route) 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 {path:'/login',component:login}, 46 {path:'/register',component:register} 47 ] 48 }) 49 50 //创建 Vue 实例，得到 ViewModel 51 var vm = new Vue({ 52 el:'#app', 53 data:{ 54 msg:'' 55 }, 56 methods:{}, 57 //router:router 58 router 59 }); 60 </script> 61 </body> 62 </html>