Vue Academy · 课时

编程式导航与 useRouter

router.push()、router.replace()、router.go()、useRouter() 和 useRoute() 组合式函数

编程式导航与 useRouter 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

从代码中导航

除了 RouterLink，您经常还需要从 JavaScript 中导航，例如提交表单或登录之后。useRouter 可组合函数会提供路由器实例，让您完成这项操作。

获取路由器

在 <script setup> 内调用 useRouter()。返回的对象会提供 push、replace、go 等功能。

import { useRouter } from 'vue-router'
const router = useRouter()

使用 push 导航

router.push 会向历史记录栈添加一条记录，就像点击链接一样。最简单的形式接收一个路径字符串。

router.push('/dashboard')

使用路由对象执行 push

您也可以传入一个包含 name、params 和 query 的对象。使用命名路由可以避免将路径硬编码。

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

使用 replace：不添加历史记录

router.replace 会在不添加历史记录的情况下导航，因此后退按钮会跳过该页面。登录后请使用它，这样用户就无法返回登录页面。

router.replace('/dashboard')

前进和后退

router.go(n) 会按 n 步在历史记录中移动。router.go(-1) 后退一页；router.go(1) 前进一页。

function goBack() {
  router.go(-1)
}

异步操作之后

典型流程是：提交表单，等待结果，然后导航。push 会返回一个 Promise，您可以等待它完成。

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

读取当前路由

要读取当前路由的参数和查询字符串，请使用 useRoute 可组合函数。不要将它与 useRouter 混淆——useRoute 表示路由，useRouter 表示导航器。

import { useRoute } from 'vue-router'
const route = useRoute()

访问参数

通过 route.params 读取动态片段。对于 /user/:id 路由，id 位于 route.params.id 中。

const userId = route.params.id

访问查询字符串

通过 route.query 读取查询字符串。对于 ?tab=profile，请使用 route.query.tab。

const tab = route.query.tab

响应参数变化

由于 route 具有响应性，您可以监听它，以便在停留在同一组件中时响应参数变化。

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

快速检查

请测试您对编程式导航的了解。

回顾

您已经学会编程式导航：

useRouter() 提供 push、replace 和 go。
push 会添加历史记录；replace 不会；go(-1) 会后退。
push 接收路径字符串或 { name, params, query } 对象。
useRoute() 读取当前参数和查询字符串，并且具有响应性。

常见问题解答

「编程式导航与 useRouter」课时是免费的吗？

是的 — 「编程式导航与 useRouter」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「编程式导航与 useRouter」这节课中我会学到什么？

router.push()、router.replace()、router.go()、useRouter() 和 useRoute() 组合式函数你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「编程式导航与 useRouter」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy