【前端疑难杂症bug——路由跳转后，点击后退，地址栏有变化，页面没反应】

vue-router 细节

问题记录

当我在router.beforeEach中拦截了路由守卫进行逻辑判断重定向的时候，利用了

router.beforeEach(()=>{
	...
	router.replace({ name: to.name, query });
	...
}) 
问题出现了，当你前进到某个路由，想后退回去的时候，只看到地址栏url会变化，但是整个页面没有反应

问题分析

查阅了相关文档发现

在router.beforeEach中：

• router.replace(…)
  中断当前导航守卫流程，直接触发新的导航守卫，会导致当前导航未完成，浏览器地址栏变化，但页面可能未渲染。
• next({})
  完成当前导航流程，不会触发新的导航守卫

解决方法

router.beforeEach(()=>{
	...
	// router.replace({ name: to.name, query });

	// 通过next()完成导航
	next({
    name: to.name,
    query: { force: 1 },
    replace: true // 关键参数
 	});
	...
}) 

完美撒花