关于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()
	}
})