除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
导航到不同的位置
注意:在 Vue 实例中,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...) :
![](data:image/png;base64,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)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path :
const username = 'eduardo'
// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
当指定 params 时,可提供 string 或 number 参数(或者对于可重复的参数可提供一个数组)。任何其他类型(如 undefined、false 等)都将被自动字符串化。对于可选参数,你可以提供一个空字符串("")来跳过它。
由于属性 to 与 router.push 接受的对象种类相同,所以两者的规则完全相同。
router.push 和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。
替换当前位置
它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
![](data:image/png;base64,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)
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true :
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
横跨历史
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)。
例子
// 向前移动一条记录,与 router.forward() 相同
router.go(1)
// 返回一条记录,与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)
篡改历史
你可能已经注意到,router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版,它们确实模仿了 window.history 的 API。
因此,如果你已经熟悉 Browser History APIs,在使用 Vue Router 时,操作历史记录就会觉得很熟悉。
值得一提的是,无论在创建路由器实例时传递什么样的 history 配置,Vue Router 的导航方法( push、replace、go )都能始终正常工作。