当前位置：首页 > news >正文

Vue Router （编程式导航）

news 2025/11/11 12:57:30

前言：

编程式导航：应用程序中通过代码（而不是用户点击链接或按钮等手动操作）来控制页面或视图的跳转与导航。

在传统的多页应用（MPA）中，页面之间的跳转通常是通过 <a>标签实现的，即用户点击链接后浏览器加载新的页面。但在单页应用（SPA）中，页面并不会真正刷新，而是通过 JavaScript 动态地切换视图内容。为了实现这种视图间的切换，我们就需要用到 路由（Router），并通过 编程式导航 在代码中控制路由的跳转。

1、基本用法（ router.push ）

会向浏览器的历史堆栈中添加一个新的记录，当用户点击浏览器的后退按钮时，他们会返回到之前的 URL。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 在组件中，可以通过 this.$router 访问路由实例
// 导航到一个不同的 URL
this.$router.push('/some/path');
// 使用一个命名路由，同时提供路由参数
this.$router.push({ name: 'user', params: { userId: 123 }});
// 带查询参数，最终 URL 为 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' }});
// 带 hash 的导航，最终 URL 为 /about#team
this.$router.push({ path: '/about', hash: '#team' });

2、替换当前位置（`router.replace`）

如果你想替换当前历史记录而不是添加新的记录，可以使用 router.replace 方法。这通常用于避免用户点击后退按钮返回到一个特定的 URL：

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

// 替换当前历史记录
this.$router.replace('/another/path');
// 相当于
this.$router.push({path: '/another/path',replace: true  // 关键在这里！
});router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

3、横跨历史记录（router.go ）

router.go 方法允许你在历史记录中前进或后退特定的步数，类似于 window.history.go(n)。

// 向前移动一条记录，与 router.forward() 相同
router.go(1)// 返回一条记录，与 router.back() 相同
router.go(-1)// 前进 3 条记录
router.go(3)// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

4、篡改历史

router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。

注意：

当使用 router.push 或 router.replace 时，你可以传递一个字符串路径，或者一个描述地址的对象。
如果提供了 path，params 会被忽略。你需要提供路由的 name 或手写完整的带有参数的 path。
router.push 和 router.replace 方法返回的是一个 Promise，可以让你知道导航是否成功。

一个 Promise对象有以下 三种状态：

状态	说明	是否可变
pending（等待中）	初始状态，既没有完成，也没有失败	✅ 可变为 fulfilled 或 rejected
fulfilled（已成功）	意味着操作成功完成，通常会有一个返回值（result）	❌ 不可再变
rejected（已失败）	意味着操作失败，通常会携带一个错误信息（reason）	❌ 不可再变