Vue 3 使用 useRouter/useRoute（需 Vue Router 4），Vue 2.7 通过 getCurrentInstance().proxy.$router 获取路由实例；两者 API 和版本严格对应，不可混用。

在 Vue Composition API 的 setup 中使用路由跳转，关键在于正确获取路由实例，并根据 Vue 版本匹配对应的 Vue Router 版本和 API。Vue 2.7 和 Vue 3 的处理方式完全不同，不能混用。

---

✅ Vue 3（推荐：Vue Router 4 + <script setup>）

Vue 3 官方支持 useRouter 和 useRoute，这是 Composition API 的标准用法。

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 跳转到命名路由（带参数）
const goToUser = (id) => {
  router.push({ name: 'UserDetail', params: { id } })
}

// 跳转到路径（带查询参数）
const search = (keyword) => {
  router.push({ path: '/search', query: { q: keyword } })
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 替换当前路由（不留下历史记录）
const replaceLogin = () => {
  router.replace('/login')
}
</script>

⚠️ 注意：

• 必须安装并使用 Vue Router 4（vue-router@4），否则 useRouter 会报错。
• 路由配置中需定义命名路由（如 name: 'UserDetail'）才能用 params 安全传参。
• useRoute() 用于在目标组件中读取当前路由信息（如 route.params.id、route.query.q）。

---

⚠️ Vue 2.7（实际是 Vue 2 + Composition API 插件）

Vue 2.7 虽支持 setup()，但底层仍是 Vue Router 3，不提供 useRouter。强行导入会报错：

立即学习“前端免费学习笔记（深入）”；

TypeError: (0 , vue_router__WEBPACK_IMPORTED_MODULE_2__.useRouter) is not a function

正确做法是通过 getCurrentInstance 获取 $router：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const router = proxy.$router

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

const goToUser = (id) => {
  router.push(`/user/${id}`)
}

// 也可用对象形式（需确保路由已配置 name）
// router.push({ name: 'user', params: { id } })
</script>

? 补充说明：

• proxy 相当于 Vue 2 中的 this，可访问 $router、$route、$emit 等实例属性。
• 动态参数（如 /user/:id）需在路由配置中声明，且 router.push 用 path 字符串或命名路由对象均可。
• 不推荐在 setup 中直接使用 this（不存在），必须走 getCurrentInstance()。

---

? 路由跳转常用方法对比

方法	作用	是否添加历史记录	典型场景
router.push()	导航到新地址	✅ 是	普通跳转（如点击菜单）
router.replace()	替换当前历史记录	❌ 否	登录后跳首页、避免回退到登录页
router.back() / forward()	浏览器前进/后退	—	返回上一页、取消操作
router.go(n)	前进或后退 n 步	—	go(-1) 等价于 back()

---

? 补充：监听路由变化（如返回时触发逻辑）

在 setup 中可用 watch 监听 route（Vue 3）或 $route（Vue 2.7）：

Vue 3 示例：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(() => route.path, (to, from) => {
  if (from === '/edit' && to === '/list') {
    console.log('从编辑页返回列表页，刷新数据')
  }
})

Vue 2.7 示例：

import { getCurrentInstance, watch } from 'vue'

const { proxy } = getCurrentInstance()
watch(() => proxy.$route.path, (to, from) => {
  if (from === '/edit' && to === '/list') {
    proxy.refreshList()
  }
})

不复杂但容易忽略细节。