獲取路由傳過去的參數，運用了一個叫聲明周期的函數。
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 <script src="./node_modules/vue/dist/vue.js"></script> 10 <script src="./node_modules/vue-router/dist/vue-router.js"></script> 11 </head> 12 13 <body> 14 15 <style> 16 .router-link-active { 17 color: red; 18 font-weight: bolder; 19 font-size: 20px; 20 } 21 </style> 22 <div id="app"> 23 <!-- <a href="#/login">login</a> --> 24 <!-- <a href="#/regis">regis</a> --> 25 <router-link to="/login?id=10&name=chp" tag="span">login</router-link> 26 <router-link to="/regis" tag="span">regis</router-link> 27 <router-view></router-view> 28 </div> 29 30 31 <script> 32 var login = { 33 template: '<h1>login+{{$route.query.id}}+{{$route.query.name}}</h1>', 34 created() { 35 // 組件的聲明周期函數 36 console.log(this.$route.query.id); 37 } 38 } 39 var regis = { 40 template: '<h1>regis</h1>' 41 } 42 43 var routerobj = new VueRouter({ 44 routes: [ 45 // 路由匹配規則 46 { path: '/login', component: login }, 47 { path: '/regis', component: regis } 48 ] 49 }) 50 51 new Vue({ 52 el: "#app", 53 data: {}, 54 methods: { 55 56 }, 57 router: routerobj 58 59 }) 60 </script> 61 </body> 62 63 </html>