什么是嵌套路由？
就是说，我们在一个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，开启无限套娃的模式，原理上都是一样的，就不跟扯犊子了。
赶到周六，跟各位扯扯犊子开心开心。
如有错误，还请各位批评指正！！！！