什麼是嵌套路由？
就是說，我們在一個component裏面去放置了另外一個組件，這個組件的內容會根據不同的路由顯示不同的東西。
說白了就是大組件裏面套用了一個小組件，但是這個小組件吶，不是我們寫死的，而是根據不同的路由進行顯示的。
借用官方的一張圖
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
假如我們沒有使用router-view，但是我們卻也有這個需求：點擊不同的按鈕，展示區顯示不同的內容
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zd4MJEVu-1590837105685)(C:\Users\11294\AppData\Roaming\Typora\typora-user-images\image-20200530171646175.png)]
咱們以vue cli創建的項目爲例，把App.vue裏面的router-view刪除，我們就假裝不知道又router-vewi這個東西，看看我們怎麼實現。
通常的做法就是：
通過v-show來控制顯示和隱藏
<template>
<div id="app">
<div id="nav">
<!-- <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>-->
<div class="buttonContainer">
<button @click="clickButton(1)">按鈕A</button>
<button @click="clickButton(2)">按鈕B</button>
<button @click="clickButton(3)">按鈕C</button>
<button @click="clickButton(4)">按鈕D</button>
</div>
<div>
<keep-alive>
<aboutA v-show="ifShow === 1"></aboutA>
</keep-alive>
<keep-alive>
<aboutB v-show="ifShow === 2"></aboutB>
</keep-alive>
<keep-alive>
<aboutC v-show="ifShow === 3"></aboutC>
</keep-alive>
<keep-alive>
<aboutD v-show="ifShow === 4"></aboutD>
</keep-alive>
</div>
</div>
</div>
</template>
<script>
import aboutA from './views/AboutA.vue'
import aboutB from './views/AboutB.vue'
import aboutC from './views/AboutC.vue'
import aboutD from './views/AboutD.vue'
export default {
components:{
aboutA,
aboutB,
aboutC,
aboutD
},
data() {
return {
ifShow:1
};
},
methods: {
clickButton(item) {
this.ifShow = item
}
}
};
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
.buttonContainer {
display: flex;
justify-content: space-around;
align-items: center;
}
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
這樣我們也是能實現的。
但是這個時候我們就要問了，那既然能實現了，爲啥我們還要用router-view吶？
首先我們就要思考一下，爲啥我們拉屎要用紙？直接跟三哥一樣用手指不行嘛？反正都能解決拉屎擦屁股的問題
扯犢子結束，下面講講router-view我們到底應該怎麼用？
首先我們來講一下，什麼是router-view?
router-view是一個組件，用來承載路由匹配的組件的出口，可以理解成是一個容器。當我們點擊上面的A按鈕的時候，內容展示區就替換成了對應的aboutA組件，當我們點擊了B按鈕的時候，內容展示區就替換成了對應的aboutB組件,不需要我們再使用v-show或者v-if進行判定。
注意，使用router-view的時候，一定要注意替換它的組件的層級。舉個例子
vue cli創建的原始的項目是這樣的：
它完成的功能就是當我們點擊Home或者About的時候，router-view就被替換成了不同的內容。
很多人都會有疑問，router-view怎麼就知道該渲染哪一個組件了？
首先我們先看看router裏面怎麼定義的路由
路由數組裏面直接定義了兩個路由，分別對應了不同的組件。
所以你點擊的時候，會根據路由router-view會渲染路由對應的組件。
還有人會問了，你說的我知道啊，但是我再其他地方使用的時候，爲什麼router-view爲什麼就是不顯示吶？
要講了解這一點，我們就需要知道
app.vue是vue項目的主組件，是頁面的入口文件，其他的所有的組件有相當於它的子組件，還有就是router-view渲染的時候，需要對應的級別
有人會問，那我能渲染其他路由下面的children嘛？
像下面這樣的，我們的路由A對應的vue文件裏面有一個router-view。這個時候，我們想讓這個router-view渲染D路由對應的組件內容嘛？
答案是：當然不行，這個是路由嵌套，不是路由混搭。你讓人家兒子叫你爹，人家老子不揍死你啊(A路由對應的組件去讓D路由對應的組件渲染，C路由對應的組件，還不揍死它)
那有人又要講了，我就是想渲染D，咋整？
你做一個親子鑑定（把D放到A的children裏面），讓D也成爲你兒子不就行了
當爹還是當兒子其實是由你定義的路由決定的
router-view好象也就那麼多知識點，當然你也可以再嵌套一層children，開啓無限套娃的模式，原理上都是一樣的，就不跟扯犢子了。
趕到週六，跟各位扯扯犢子開心開心。
如有錯誤，還請各位批評指正！！！！