vue - 子路由-路由嵌套

描述：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和component，然后在相应部分添加<router-view/>来展现子页面信息，相当于嵌入iframe。

Home.vue

 1 <template>
 2     <div class="hello">
 3         <h1>{{ msg }}</h1>
 4         <!-- 添加子路由导航 -->
 5         <p>导航 ：
 6             <router-link to="/home">首页</router-link> | 
 7             <router-link to="/home/one">-子页面1</router-link> |
 8             <router-link to="/home/two">-子页面2</router-link>
 9         </p>
10         <!-- 子页面展示部分 -->
11         <router-view/>
12     </div>
13 </template>
14 
15 <script>
16 export default {
17     name: 'Home',
18     data () {
19         return {
20             msg: 'Home Page!'
21         }
22     }
23 }
24 </script>
25 
26 <style scoped>
27 </style>

One.vue /Two.vue

 1 <template>
 2   <div class="hello">
 3     <h1>{{ msg }}</h1>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: "One",
10   data() {
11     return {
12       msg: "Welcome to One!"
13     };
14   }
15 };
16 </script>
17 
18 <!-- Add "scoped" attribute to limit CSS to this component only -->
19 <style scoped>
20 h1,
21 h2 {
22   font-weight: normal;
23 }
24 ul {
25   list-style-type: none;
26   padding: 0;
27 }
28 li {
29   display: inline-block;
30   margin: 0 10px;
31 }
32 a {
33   color: #42b983;
34 }
35 </style>

index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Home from '@/components/Home'
 4 import One from '@/components/One' 
 5 import Two from '@/components/Two'
 6 
 7 Vue.use(Router)
 8 
 9 export default new Router({
10     routes: [
11     {
12         path: '/', // 默认页面重定向到主页
13         redirect: '/home'
14     },
15     {
16         path: '/home', // 主页路由
17         name: 'Home',
18         component: Home,
19         children:[ // 嵌套子路由
20             {
21                 path:'one', // 子页面1
22                 component:One
23             },
24             {
25                 path:'two', // 子页面2
26                 component:Two
27             },
28         ]
29     }
30     ]
31 })