router跳转两次

环境:

  • vue cli3项目

问题:

路由的参数没有,导致页面报错,实际是路由跳转两次,第一次有参数,第二次没有

分析:

既然跳转了两次首先应该想发起路由跳转的事件里面是否出现重复的this.$router.push,查看一番并没有,于是想到全局的路由守卫中或许出现重复跳转,结果发现还是没有,结果只能打断点调试查看,发现路由跳转的事件没有执行两次,但是路由守卫执行了两次,这说明肯定有地方多调用了一次。最后全局搜索发现在根组件里面做了路由监听里面

watch: {
	'$route': {
		deep: true,
		handler(to,from) {
			if(to.path != from.path){
				this.$router.push(to.path);
			}
		}
	}
}

去掉上面的内容,或者如下

watch: {
	'$route': {
		deep: true,
		handler(to,from) {
			if(to.path != from.path){
				this.$router.push(to);
			}
		}
	}
}

如果没有太大意义,最好不要在路由监听里面执行路由跳转,很容易会出现死循环,或者跳转多次情况。

你可能感兴趣的:(vue,vue.js,路由丢失参数,路由跳转两次)