关于Vue刷新后丢失动态路由

原因

在页面刷新后,页面中的路由等信息被重新初始化,但并不等同于项目重启,动态路由添加的内容未被执行,导致只保留了固定路由的部分,所以页面刷新后,会重定向到404界面

思路

既然是因为刷新后,路由丢失,那么可以在路由跳转时,使用路由守卫进行拦截,将其重新添加一遍即可。

解决方案

ps:404界面重定向路由,一定得在最后添加,不能直接写在固定路由中,否则会导致直接重定向到404界面

router.beforeEach((to, from, next) => {
	// userToken是在登录时存入的信息,如果存在,则说明用户已经登录过
	let userToken = localStorage.getItem("userToken")
	if(userToken){
		// 在setRoutes方法中,添加的路由同步添加至vuex中
		let routes = store.getters.routes
		// 用户已登录,但不存在动态路由,说明页面存在刷新
		if(routes.length===0){
			// 调用添加路由的方法,并且next中重新跳转to
			setRoutes()
			next({...to,replace: true})
		}else{
			// 正常跳转
			next()
		}
	}else{
		// 用户未登录
		next()
	}
})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐