Vue系列之 => 路由的嵌套

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
 8     <title>管理后台</title>
 9     <script src="../lib/jquery2.1.4.min.js"></script>
10     <script src="../lib/Vue2.5.17.js"></script>
11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
15         crossorigin="anonymous">
16 </head>
17 <style>
18 
19 </style>
20 
21 <body>
22     <div id="app">
23         <router-link to="/account">Account</router-link>
24         <router-view></router-view>
25     </div>
26 
27     <template id="tmp1">
28         <div>
29             <h1>这是 Account 组件</h1>
30             <router-link to="/account/login">登录</router-link>
31             <router-link to="/account/register">注册</router-link>
32             <router-view></router-view>
33         </div>
34     </template>
35 
36     <!-- 子组件 -->
37     <template id="login">
38         <div>
39             <h1>登录一下</h1>
40         </div>
41     </template>
42     <template id="register">
43         <div>
44             <h1>注册一下</h1>
45         </div>
46     </template>
47 
48     <script>
49         var login = {
50             template: '#login'
51         };
52 
53         var register = {
54             template: '#register'
55         };
56 
57         var account = {
58             template: '#tmp1'
59         };
60 
61         var routerObj = new VueRouter({
62             routes: [{
63                     path: '/account',
64                     component: account,
65                     //正确的方法写在children里面
66                     children : [
67                         { path : 'login' , component : login},
68                         { path : 'register' , component : register},
69                     ]
70                 },
71 
72                 // 错误方法
73                 // { path : '/account/login' , component : login},
74                 // { path : '/account/register' , component : register},
75             ]
76         });
77 
78         var vm = new Vue({
79             el: '#app',
80             data: {},
81             methods: {
82 
83             },
84             router: routerObj
85         });
86     </script>
87 </body>
88 
89 </html>
Vue系列之 => 路由的嵌套

猜你喜欢
