Vue中嵌套路由的使用

上一篇说到了动态路由,这一篇说一下嵌套路由的使用。
那么我们来看一下官方的一个图
Vue中嵌套路由的使用_第1张图片
从上图就可以看出在同一个视图中,User不变的情况下Profile和posts的转换了,那么这就说明了这两者都是User中的嵌套路由,也可以叫子路由。另外作用也呼之欲出。
嵌套路由可以在整体视图不变的情况下部分内容的变化。

下面还是以我写的一个后台管理系统作为案例
先来看一下效果图
Vue中嵌套路由的使用_第2张图片
这里看到了在固定的一个位置商品管理订单管理用户列表之间的切换。
Vue中嵌套路由的使用_第3张图片
这里的这个Home-main组件就是用来显示商品管理用户管理这些子路由的。
但是这个组件并不是他们的父组件!我将他们放在了Home组件的下面

	//路由出口, 路由匹配到的组件将渲染在这里!

下面看一下如何配置嵌套路由
Vue中嵌套路由的使用_第4张图片
只需要在普通的路由中加一个children:[],然后在这个里面写一个路由就可以了,这样也就成为了嵌套路由。

跳转的方法不变,只需要写上配置好的子路由路径即可。
Vue中嵌套路由的使用_第5张图片

哪里写的不好或有什么问题,请评论告诉我,万分感谢!

你可能感兴趣的:(Vue)