vue-router 多级路由跳转时,路由变了,但是页面没动,解决方案

408 阅读1分钟

大概情况时这么个情况,公司新项目,一套saas系统,需要设置用户权限,面包屑导航,等等。

前面一直都正常,在搞面包屑导航的时候,必须要用嵌套路由,也就是必须要加children,加上去之后发现。

呵呵,页面没有了,页面不显示,但是路由还是正常切来切去。无论从哪里查数据,路由都是正确的。

这个saas就是我们最常见的布局结构,一个顶部header栏,一个左边的menu栏剩下的就是页面切换的地方,你知道我说的意思吧。全局只有一个<router-view></router-view>

最开始我以为是面包屑导航的问题,我用的是elementel-breadcrumb,后来又以为是el-menu的问题,找了个遍,都不是。

最后从各种角度搜索问题,终于让我找到了问题的真正原因:嵌套路由的时候,<router-view></router-view>也需要嵌套,也就是说,我这里缺少了<router-view></router-view>

具体解决呢,就是哪一层缺少就往哪一层加<router-view></router-view>,方法就是:

在缺少的那一层routes里定义:

component: {render(c) { return c('router-view') }}

ok,打完收工。