Vue基础教程（170）Vue Router之编程式导航：别再用router-link了！Vue Router编程式导航让你像老司机一样飙车

一、路由小白？先搞清楚我们在聊什么

想象一下，你在一个巨大的商场里逛街。声明式导航就像商场里那些明确的指示牌——“卫生间往前50米”、“美食区上三楼”，而编程式导航呢，就像你直接对导购员说：“带我去最贵的那个奢侈品店！”——更直接、更灵活、更带感！

在Vue的世界里，<router-link>就是那些指示牌，而编程式导航就是你手中的导航遥控器。今天，我要教你的就是怎么玩转这个遥控器。

什么是编程式导航？ 官方说法是：通过调用JavaScript方法来实现路由跳转。说人话就是：不用点击链接，在代码里想什么时候跳转就什么时候跳转，想怎么跳就怎么跳！

二、为什么我要放弃可爱的router-link？

我知道，你现在可能在想：“我用<router-link>挺好的啊，干嘛要学这个？”

来，让我给你几个无法拒绝的理由：

时机掌控大师：你可以在异步操作完成后跳转，比如用户注册成功后自动跳转到个人主页
条件判断专家：根据复杂条件决定去哪，比如用户没登录就跳登录页，登录了就跳首页
动态路由玩家：可以动态构造复杂的路由路径和参数
用户体验优化师：实现平滑的页面流，比如表单分步骤填写时的页面切换

简单来说，<router-link>能满足你80%的日常需求，但编程式导航能让你成为那20%的路由高手！

三、装备你的导航武器库

Vue Router给我们准备了一套超级好用的导航工具，让我们一个个来认识：

1. this.$router.push() - 你的主力导航武器

这是你最常用、也最好用的方法，相当于点击了一个链接，会在history栈中添加新记录。

// 字符串路径
this.$router.push('/home')

// 对象形式
this.$router.push({ path: '/home' })

// 命名路由，这种方式更灵活
this.$router.push({ name: 'user', params: { userId: '123' } })

// 带查询参数，变成 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } })

实战场景：用户登录成功后跳转

async login() {
  try {
    await this.$store.dispatch('user/login', this.loginForm)
    // 登录成功后跳转到首页或者原计划访问的页面
    const redirect = this.$route.query.redirect || '/dashboard'
    this.$router.push(redirect)
    this.$message.success('登录成功！')
  } catch (error) {
    this.$message.error('登录失败，请重试')
  }
}

2. this.$router.replace() - 替换当前记录

这个方法不会向history添加新记录，而是替换掉当前记录。想象一下你在填多步骤表单，第二步替换第一步，这样用户点返回时不会回到第一步。

// 用户完成第一步，进入第二步时替换当前路由
this.$router.replace('/signup/step2')

// 实际应用：权限检查后的跳转
checkPermission() {
  if (!this.hasPermission) {
    this.$router.replace('/no-permission')
    return
  }
  // 继续正常业务流程
}

3. this.$router.go() - 历史记录时光机

这个就厉害了，可以在历史记录中前进后退，正数前进，负数后退。

// 前进一条记录，相当于 router.forward()
this.$rout