当前位置: 代码迷 >> 综合 >> vue-router 父路由重定向到子路由加载问题
  详细解决方案

vue-router 父路由重定向到子路由加载问题

热度:78   发布时间:2023-10-17 05:29:42.0

最近在学习vue后找了一个vue-admin-template框架进行搭建和改造,发现一个地方,困恼了很久。

vue-router 父路由重定向到子路由加载问题vue-router 父路由重定向到子路由加载问题

困扰:使用redirect,这里使用了重定向,按我的理解是,页面只加载重定向后的组件。可是结果却是父组件Layout(菜单组件)也加载出来了。

经过查阅资料:最总发现一片写的很明白:https://www.jianshu.com/p/1e24bfbee631

转载资料:

const routes = [{path: '/home',name: 'Home',component: Home,children: [{path: 'son',name: 'Son',component: Son}]}
]

这时候访问son组件的路由是/home/son
但是在项目中配置的时候我们往往都要配置一个重定向,由父页面指向子页面

const routes = [{path: '/home',name: 'Home',component: Home,redirect: '/son',//这里配置了重定向children: [{path: '/son',//这里的路径跟上边的不一样,前边加上了'/'name: 'Son',component: Son}]}
]

这时候只要我们访问主页面/home页面就会跳转到/son路由,并把home组件连带son组件一起加载出来。这与上边有什么不同呢?上边访问的路径是/home/son,而这里只要访问/son就能直接打开同样的页面。在网上找了好多资料,最后在官网找到这样一句话

 

vue-router 父路由重定向到子路由加载问题

我理解的意思是,如果在嵌套路由的path前加上了'/',那么这个path就会被当作根路径。所谓根路径应该就是可以直接访问到的路径,vue-router应该会把以'/'开头的子路由与它所在的父组件默认绑定在一起,当我们访问/son时就相当于访问了/home/son

最后总结一句话就是:子路由的path如果前边带 '/ ' 则访问这个子路由时只需要访问子路由的path,系统会默认加载它所在的父组件。如果前边没有 '/ ' 那么需要按照 /父路由/子路由的形式访问

 

  相关解决方案