Vue Router组件内编程式导航失效：登录后无法跳转至Dashboard

嘿，我来帮你排查这个编程式导航失效的问题，结合你的代码和vue-router 3.0.1的特性，大概率是这两个原因之一：

1. $router.push 的参数格式不对 #

在vue-router 3.x版本里，push方法的字符串参数得是完整的路由路径，或者用命名路由对象的形式。你现在写的this.$router.push('dashboard')是相对路径，会基于当前的/login路径拼成/login/dashboard——但你的路由配置里根本没这个路径，自然跳转不生效。

给你两种正确的写法：

• 用完整路径：

  this.$router.push('/dashboard')
  

• 用命名路由（更推荐，后续改路径也不用改这里）：

  this.$router.push({ name: 'dashboard' })
  

2. 路由守卫和状态更新的异步顺序搞反了 #

你的dashboard路由加了beforeEnter守卫，会检查store.getters.isAuthenticated是不是true。如果你的authorizeUser是异步请求（比如调后端登录接口），那在then里执行push的时候，store里的认证状态可能还没更新完——这时候跳去dashboard会触发守卫，发现isAuthenticated还是false，就自动重定向回/login了，所以你看起来页面没变化。

你可以先验证一下：在push之前打印认证状态看看：

userLogin () {
	this.authorizeUser({ name: this.user.name, pass: this.user.pass }).then(result => {
		console.log('当前认证状态：', this.$store.getters.isAuthenticated)
		console.log('redirected to dashboard')
		this.$router.push({ name: 'dashboard' })
	})
}

如果打印出来是false，那就是状态更新慢了。你得确保认证状态完全更新后再跳转，比如如果authorizeUser内部是通过dispatch store action来更新状态的，要等action执行完再push：

// 假设authorizeUser返回的是store action的Promise
userLogin () {
	this.authorizeUser({ name: this.user.name, pass: this.user.pass })
		.then(() => {
			// 这里状态已经更新好了
			this.$router.push({ name: 'dashboard' })
		})
}

另外你说this.$router.go('dashboard')能正常跳转——其实$router.go的参数应该是数字（比如go(1)前进一页，go(-1)后退一页），你大概率是误写成go了，实际应该是push或者replace，这也侧面说明路径格式的问题是关键之一。

内容的提问来源于stack exchange，提问作者user6748331