编程式导航使用的方法以及常用的方法

在 Vue Router 中，编程式导航是指通过 JavaScript 代码控制路由跳转，而不是使用 <router-link> 这样的声明式导航。

一、常用方法（基于 Vue Router 4）

编程式导航主要通过 router 实例提供的方法实现，常用的有以下几个：

1. router.push(location)

作用：跳转到一个新的路由，并将该记录添加到历史记录栈中。
参数：
1, 字符串路径：router.push('/home')
2, 对象形式：

router.push({
  path: '/user',
  query: { id: 123 }
})

带参数的写法（命名路由）：

router.push({ name: 'user', params: { userId: 123 } })

2. router.replace(location)

作用：跳转到一个新路由，但不会在历史记录中留下记录（相当于替换当前页）。
用法同 push：

router.replace('/login')

3. router.go(n)

作用：类似于浏览器的 history.go(n)，向前或后跳转 n 步。
示例：

router.go(-1) // 后退一步
router.go(1)  // 前进一步

4. router.back() 和 router.forward()

简化版本的 go(n)：

router.back()     // 相当于 router.go(-1)
router.forward()  // 相当于 router.go(1)

二、示例代码（组合式 API）

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const toHome = () => {
      router.push('/home')
    }

    const toUser = () => {
      router.push({ name: 'user', params: { id: 42 } })
    }

    const goBack = () => {
      router.back()
    }

    return { toHome, toUser, goBack }
  }
}

三、总结对比

方法	功能	是否添加历史记录
router.push()	正常跳转	✅ 是
router.replace()	替换当前路由，不留历史	❌ 否
router.go(n)	前进/后退 n 步	—
router.back()	后退	—
router.forward()	前进	—