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>
