vue 路由嵌套 vue-router --》children

       在項目的很多子頁面中，我們往往需要在同一個頁面做一個組件的切換，同時保存這個頁面的部分數據（比如樹形菜單），進而顯示不同的數據，之前我都是通過v-show/v-if來實現，但當切換的組件太多時，上述方法顯然不太合理，而在實際開發中，當你切換的組件太多時，后端往往會將你切換組件的路由給你，所以在這說一下關於vue-router中children，來解決此問題。

　　例如：在routerChildren.vue中有兩個按鈕，點擊按鈕1跳轉的one頁面 ，點擊按鈕2跳轉的two頁面 ，但是需要保存這兩個按鈕（如果直接通過this.$router.push(),按鈕將會消失，會完全跳轉）

　　1.首先我們需要配置一下路由 ，在router.js中　　　　

import RouterChildren from "./views/routerChildren.vue"
import RouterChildrenOne from "./views/children/one.vue"
import RouterChildrenTwo from "./views/children/two.vue"


 {
        path: "/routerChildren",
        name: "routerChildren",
        component: RouterChildren,
        children: [
            {
                path: '/',  //代表 /routerChildren
                name: "routerChildren",
                redirect:'/routerChildren/one' //當我們訪問存在子路由的頁面時，重定向為第一個子路由，切記，如果寫了component，那么這個component也將顯示
            },
            {
                path: '/routerChildren/one',
                component: RouterChildrenOne,
            },
            {
                path: '/routerChildren/two',
                component: RouterChildrenTwo,
            }
        ]
    }

2.在rouertChildren.vue組件中，我們寫一下簡單的樣式及跳轉

<template>
    <div>
        <h1>
            <p @click="handleOne">子路由1</p>
            <p @click="handleTwo">子路由2</p>
        </h1>
         <router-view></router-view>
    </div>
   
</template>
<script>
export default {
    methods: {
        handleOne() {
            this.$router.push('/routerChildren/one')
        },
        handleTwo() {
            this.$router.push('/routerChildren/two')
        }
    }
}
</script>
<style scoped>
h1 {
    display: flex;
    justify-content: center;
}
p {
    margin: 20px;
    cursor: pointer;
}
</style>

在這里我們一定要注意需要在這個組件中帶上  <router-view></router-view>這個標簽

否則，你切換的one組件和two組件里面的內容不會顯示，

　　談下個人對<router-view/>這玩意兒的理解：

　　　　我感覺這個東西就是一個當前組件的容器，與當前組件相關聯的組件想要顯示，就需要通過他，也就是說一層路徑對應一個<router-view/>，每一個與組件相匹配的路由都會在<router-view/>中顯示

　　　　我們的項目中所有組件都關聯在app這個組件上，如何進行切換顯示的呢，就是通過這個東西<router-view/>，

　　　　所以說如果app下面有個One組件，但是在One組件里想要通過跳轉來顯示OneOne及OneTwo組件，你就必須在One組件里寫一個<router-view/>。

  　　ok，結束！！