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

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，結束！！