目的:vue项目开发时用到子路由的嵌套
1.一开始使用:
<component v-bind:is="content"></component>
解决子组件的 切换的。通过改变content的赋值来实现加载子组件。
2. 但是当路径发生变化是比如多了子路由1中的组件就不能 满足使用了。
3.比如:#/Home/ Children
其中#/Home为 主路由页面,#/Home/ Children为子路由页面。
4.代码表示:
<div>
<router-view>
主内容
<router-view>
子内容
<router-view/>
</router-view>
</div>
5.路由控制
this.$router.push('/Home')主内容页面跳转到/Home页面中,this.$router.push('/Home/Children')主内容
不变 子内容 切换组件。
6.总结:这样一来我们的 页面就可以想切换那里就切换那里。
官方 文档:https://router.vuejs.org/zh/guide/essentials/navigation.html