获取路由传过去的参数，运用了一个叫声明周期的函数。

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>