vue嵌套路由

在實際項目中我們會碰到多層嵌套的組件組合而成，但是我們如何實現嵌套路由呢？因此我們需要在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。

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

<div id="app">  
    <!-- router-view 路由出口, 路由匹配到的組件將渲染在這里 -->  
    <router-view></router-view>  
</div> 

 

main.js，路由的重定向，就會在頁面一加載的時候，就會將home組件顯示出來，因為重定向指向了home組件，redirect的指向與path的必須一致。children里面是子路由，當然子路由里面還可以繼續嵌套子路由。

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  
  
//引入兩個組件  
import home from "./home.vue"  
import game from "./game.vue"  
//定義路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home組件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/game", component: game }  
        ]  
    }  
]  
//創建路由實例  
const router = new VueRouter({routes})  
  
new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})  

 

home.vue，點擊顯示就會將子路由顯示在出來，子路由的出口必須在父路由里面，否則子路由無法顯示。

<template>  
    <div>  
        <h3>首頁</h3>  
        <router-link to="/home/game">  
            <button>顯示<tton>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>  

 

game.vue

<template>  
    <h3>游戲</h3>  
</template>

 

運行后的結果：

點擊顯示后：