vue嵌套路由

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

index.html，只有一个路由出口

1 <div id="app">
2     <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
3     <router-view></router-view>
4 </div> 

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

 1 import Vue from ‘vue‘
 2 import VueRouter from ‘vue-router‘
 3 Vue.use(VueRouter)
 4
 5 //引入两个组件
 6 import home from "./home.vue"
 7 import game from "./game.vue"
 8 //定义路由
 9 const routes = [
10     { path: "/", redirect: "/home" },//重定向,指向了home组件
11     {
12         path: "/home", component: home,
13         children: [
14             { path: "/home/game", component: game }
15         ]
16     }
17 ]
18 //创建路由实例
19 const router = new VueRouter({routes})
20
21 new Vue({
22     el: ‘#app‘,
23     data: {
24     },
25     methods: {
26     },
27     router
28 })  

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

1 <template>
2     <div>
3         <h3>首页</h3>
4         <router-link to="/home/game">
5             <button>显示<tton>
6         </router-link>
7         <router-view></router-view>
8     </div>
9 </template>  

game.vue

1 <template>
2     <h3>游戏</h3>
3 </template>

运行后的结果：

点击显示后：