vue路由配置心得

232 阅读2分钟

当你配置一个项目的路由时,一定要把你左侧的siderBar和你真正要注册的路由表这两个东西的数据源理清除,是否要用同一个(是真嵌套,还是仅仅处于页面层级的ui嵌套,但实际注册路由的时候,都是平级注册,假嵌套)。当你的项目很简单,只有一级路由的时候(每个路由下面没有children),你可以直接使用你要注册的路由表去渲染左侧的siderBar,但如果你是有二级路由甚至三级路由的情况下,这时候你要搞清楚,你这个二级路由的出口是怎么设置(关键看需求),如果你的二级路由出口是在一级路由里面,那么你可以直接在路由表里面配置children。然后左侧siderbar可以用路由表渲染,包括children里边的子路由也不需要写根路径(也就是那个‘/’),这也是vue官网中介绍的嵌套路由的情况,但我们实际开发中,往往是两个页面确实是父子级的关系,但这两个页面并不是嵌套展示(父子路由公用一个路由出口"router-view-/router-view"),这个时候路由表和左侧的展示siderBar数据就要分开配置了,当然还有一种方法不分开配置,那就是你拿自己定义的动态路由表和后台返回的路由权限动态过滤的时候,把每个路由的children提出来,和动态路由捋平,然后去调用addRoute,但这种写法要很多兼容代码,渲染siderBar和加载路由的时候都要加一些判断,代码也很不清晰,所以不建议这么处理 如果你的页面不是嵌套路由,那么就老老实实的给vue传平级的路由表,不要套children,否则不识别

2022-5-19更新===============

最近又发现一种左侧siderbar 数据 和注册路由数据使用同一套数据的套路,那就是在嵌套的父级路由写一个组件,组件内是一个router-view, 然后在父级配置一个redirect:"此处填写子级的第一个路由"也能实现;

eca6ba0b8bc916df4ee04df1a995245.png

7e896b5120a2756703a776cd6c76559.png