目前 项目用vue2 搭建的 vue-router 是 3.2.0 版本 想往vue3迁移的小伙伴可以look look

项目结构

vue-router 分为以下三个模块

1. history模式 对URL地址导航栏的处理
2. router 的匹配机制
3. router 用一种新的方式处理导航守卫权限的管理

变化一 动态路由

`

const routes = [ { path:'/home', Component:home }, { path:"/:id", Component:main } ]

`、 匹配模式与 写的顺序无关 越精准的path匹配优先级就越高 越模糊优先级越低

变化二 导航守卫

用一种更优雅的方式处理导航守卫 用 异步Promise返回的结果 结合 async + await 方便了业务逻辑的实现 router.beforeEach(async (to, form, next) => { document.title = getTitle(to.meta.title) if (to.path === '/login') { next() } else { if (store.getters.token) { const hasRoles = store.getters.roles.length > 0 if (hasRoles) { next() } else { // 获取权限列表的数据 const { roles } = await store.dispatch("user/_getInfo") // 将这个权限列表 添加到 router中 const addRoutes = await store.dispatch( 'permission/getAsyncRoutes', roles ) router.addRoutes(addRoutes) next({ ...to, replace: true }) } } } })