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 <!--导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 <!-- 1.导入包 -->
12 <script src="../lib/vue-router-3.0.6.js"></script>
13 </head>
14
15 <body>
16 <div id="app">
17 <router-link to="/login">登录</router-link>
18 <router-link to="/register">注册</router-link>
19
20 <!-- 容器 -->
21 <router-view></router-view>
22
23 </div>
24
25 <script>
26 //2.创建子组件
27 var login={
28 template:'<h3>这是登录子组件，这个组件是 江小白 开发的。</h3>'
29 }
30
31 var register={
32 template:'<h3>这是注册子组件，这个组件是 白小江 开发的。</h3>'
33 }
34
35 //3.创建一个路由对象
36 var router=new VueRouter({
37 routes:[//路由规则数组
38 {path:'/',redirect:'/login'},
39 {path:'/login',component:login},
40 {path:'/register',component:register}
41 ],
42 linkActiveClass:'myactive' //和激活相关的类
43 })
44
45
46 //创建 Vue 实例，得到 ViewModel
47 var vm = new Vue({
48 el:'#app',
49 data:{ },
50 methods:{ },
51 // router:router
52 router,
53 watch:{
54 //this.$route.path
55 '$route.path':function(newVal,oldVal){
56 // console.log(newVal + ' --- ' +oldVal)
57 if(newVal==='/login'){
58 console.log('欢迎进入登录页面')
59 }else if(newVal==='/register'){
60 console.log('欢迎进入注册页面')
61 }
62 }
63 }
64 });
65 </script>
66 </body>
67 </html>