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 <router-link to="/account">Account</router-link>
17 <router-view></router-view>
18
19 </div>
20
21 <template id="tmp1">
22 <div>
23 <h1>这是 Account 组件</h1>
24
25 <router-link to="/account/login">登录</router-link>
26 <router-link to="/account/register">注册</router-link>
27
28 <router-view></router-view>
29
30 </div>
31 </template>
32
33
34
35
36 <script>
37
38 //组件的模板对象
39 var account={
40 template:'#tmp1'
41 }
42
43 var login={
44 template:'<h3>登录</h3>'
45 }
46
47 var register={
48 template:'<h3>注册</h3>'
49 }
50
51
52 var router=new VueRouter({
53 routes:[
54 {
55 path:'/account',
56 component:account,
57 //使用children 属性，实现子路由，同时，子路由的 path 前面，不要带 /，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
58 children:[
59 {path:'login',component:login},
60 {path:'register',component:register}
61 ]
62 },
63 // {path:'/account/login',component:login},
64 // {path:'/account/register',component:register}
65 ]
66 })
67
68
69 //创建 Vue 实例，得到 ViewModel
70 var vm = new Vue({
71 el:'#app',
72 data:{
73 msg:''
74 },
75 methods:{},
76 router
77 });
78 </script>
79 </body>
80 </html>