Vue Composition API怎么在 setup 中使用路由钩子函数跳转页面-Vue.js-PHP中文网

vue 3 使用 userouter/useroute（需 vue router 4），vue 2.7 通过 getcurrentinstance().proxy.$router 获取路由实例；两者 api 和版本严格对应，不可混用。

vue composition api怎么在 setup 中使用路由钩子函数跳转页面

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

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

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：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/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()
  }
})

不复杂但容易忽略细节。