解决动态路由刷新时跳转404的问题

2 阅读1分钟

实现得有点丑陋

方案如下: 动态路由依靠几个函数形成

1.筛选函数filterDynamicRoutes,用于根据后端返回的数据筛选出对应前端应该添加到路由里的动态路由数组myRoutes

2.添加函数pushDynamicRoutes,用于将myRoutes添加到router里面对应的路由里面变成子路由

3.判断函数hasLocalDynamicRoutes,根据本地数据判断是否执行pushDynamicRoutes


流程:默认用户登录时添加一次

因此在页面刷新时,由于是直接进入对应页面,所以并没有添加动态路由,而直接在路由守卫里执行pushDynamicRoutes也没有效果,依旧跳转404,

因此只能在main.js里执行hasLocalDynamicRoutes,以便每次进入页面时,如果本地已经有了保存了的权限数据,就添加动态路由

app.use(pinia)
// 如果本地已经保存了路由权限数据,就直接添加对应的动态路由
hasLocalDynamicRoutes()
app.use(router)
app.mount('#app')