结论
*直接说结论吧,如果把父组件的路由重定向到它的子路由上,这样做的目的是为了让嵌套路由在加载url时,不需要按照父组件/子组件
就可以把父子组件都渲染出来。
子路由的path如果前边带 '/ ' 则访问这个子路由时只需要访问子路由的path,系统会默认加载它所在的父组件。如果前边没有 '/ ' 那么需要按照 /父路由/子路由的形式访问*
过程
- 今天在学习项目的时候,要配置这个动态路由,然后发现教程里的 router/index.js 中定义的静态路由表 的父组件重定向到了子组件,这让我感觉到有点奇怪。
图中这个path为 /dashboard
的子路由是通过 动态路由 router.addRoute
方法加载进来的,我们在项目中并没有创建这个路由,但是页面却跳转成功,显示的是父组件页面,控制台报错缺少子组件。。
(这里一开始我还不知道上面的结论) 我觉得这里很不正常,因为重定向到子路由,而这个子路由不存在,页面应该呈现空白页才对,为什么还加载了父组件呢?于是我决定创建一个组件例子试试
- 我新建了gg组件,添加到静态路由表中:
这里可以看到,路由是正常工作的
- 然后我把gg路由表的component改为 undedined,这样就跟动态加载的子路由 /dashboard 一样了,让这个组件的路径不存在,我想看看它会不会加载首页
很明显可以看到,页面重定向到空白页了,也符合我们的思维,重定向到不存在的组件,就应该这样显示空白
- 但是我把这个不存在的组件路由放到首页子路由下,却发现父组件被渲染出来了!
我放到子路由下之后,确实可以加载首页
这就说明了,为什么父组件要重定向到子组件,因为会把父组件一起渲染出来,并且路径不用携带父组件的名字~