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