建站报告2000字,贵阳个人做网站,网页设计与制作教程第二版张晓蕾课后答案,内蒙古呼和浩特景点问题#xff0c;通过接口动态添加路由#xff0c;第一次从登录页跳转还是正常的#xff0c;说明路由添加成功了#xff0c;但是刷新后就白屏了#xff0c;且控制台报错路由匹配不到#xff0c;在项目的main.js#xff0c;router和路由拦截器中添加了一大堆打印后发现通过接口动态添加路由第一次从登录页跳转还是正常的说明路由添加成功了但是刷新后就白屏了且控制台报错路由匹配不到在项目的main.jsrouter和路由拦截器中添加了一大堆打印后发现在控制台报错的时候根本就没进入路由守卫。具体我就不贴代码了我添加的太多了
要解决路由匹配不到的问题首先我们应该拿到动态路由但是以往在路由守卫里进行的动态路由初始化现在行不通因为在进路由守卫之前程序已经进行了路由匹配
首先在router文件夹下定义你处理路由数据的方法。路由守卫外先执行一遍路由初始化注意我这里用了await必须等接口数据处理完成
export const setupRouterHooks async() {// 首先调用接口获取菜单列表并处理成需要的路由数组addRoute添加路由也在这个方法中,这个按照各自的要求自己处理这里就不具体贴代码了await getMenuRoute()router.beforeEach(async(to, from, next) {if (!token) {next({ path: /login })} else {if (store.getters.menu.length 0) {await getMenuRoute() }next()}})router.afterEach(to {......})
}然后就是挂载的时机在main.js中的路由初始化也要修改一下我这里是在router里写了一个方法在main.js中调用。注意这里也用了await如果初始化还没完成就已经挂载上了app也会匹配不到路由
// 在router/index.js中添加线面的方法
export const setupRouter async (app) {// 路由钩子函数await setupRouterHooks()app.use(router)
}// main.js
app.use(animate)
app.use(store)
//此处一定要用await等路由信息处理完成后再挂载
await setupRouter(app)
app.use(VueUeditorWrap)
app.use(Vant)
app.mount(#app)网上也有在路由拦截里用next({ …to, replace: true })替换next()但是我这里依旧是没起作用还死循环了原因是路由没有匹配到重新在进入一次路由守卫还是会重新再进入路由守卫一直这样循环下去所以排除了
以上是我的解决方法仅供参考吧
