vue-router嵌套路由，二級路由。

若是全是用一級路由時，路由管理就變得很臃腫，有點亂，路由有父子關係的話，嵌套路由會更好。嵌套也就是路由中的路由的意思，組件中能夠有本身的路由導航和路由容器（router-link、router-view），經過配置children可實現多層嵌套，在vue組件中使用<router-view>就能夠了。

1.嵌套路由的使用場景：

應用最多的就是選項卡，在選項卡中，頂部有多個導航欄，中間的主體顯示的是內容；這個時候，整個頁面是一個路由，而後點擊選項卡切換不一樣的路由來展現不一樣的內容，就是中間的主體顯示的是內容就是頁面路由下的子路由，這就是路由中嵌套路由。

2.舉例子說明：

在組件中：

<router-view> 是用來渲染經過路由映射過來的組件，當路徑更改時，<router-view> 中的內容也會發生更改

<template>
    <div class="standard">
        <headerBack title="嵌套路由"></headerBack>
        <div>
            <div class="tab">
                <router-link to="/standard/a">
                    <div class="children">我是a組件</div>
                </router-link>
                <router-link to="/standard/b">
                    <div class="children">我是b組件</div>
                </router-link>
                <router-link to="/standard/c">
                    <div class="children">我是c組件</div>
                </router-link>
            </div>
            <router-view/>
        </div>
    </div>
</template>

在router的index中子路由配置：

 { path: '/standard', name: 'standard', component: resolve => require(['@/pages/template/standard'], resolve), children: [ { path: 'a', component: resolve => require(['@/pages/practice/a'], resolve), }, { path: 'b', component: resolve => require(['@/pages/practice/b'], resolve), }, { path: 'c', component: resolve => require(['@/pages/practice/c'], resolve), }, ] },

點擊我是組件a按鈕路由就渲染我是組件a內容，點擊我是組件b按鈕路由就渲染我是組件b按鈕內容，點擊我是組件c按鈕路由就渲染我是組件c內容

 

點擊我是a組件：效果以下：

 

點擊我是b組件：效果以下：

點擊我是c組件：效果以下：

 

 PS:子路由組件中的class樣式被覆蓋，當須要用到路由嵌套時，clas命名時注意不要相同