vue 编程式导航 router.push() 方法使用

# 

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 

$router

this.$router.push

页面中想要导航到不同的 URL，则使用 

router.push

当你点击 

<router-link>

<router-link :to="...">

router.push(...)

<router-link :to="...">

router.push(...)

1.使用方法：

          参数：字符串路径、对象。

[code]// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：name 和 params 搭配；

           poth 和 query 搭配；

           原因是如果提供了path ， 则params 会被忽略，

替换的方法：

[code]const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 

router-link

to

在 2.2.0+，可选的在 

router.push

router.replace

onComplete

onAbort

# 

router.replace(location, onComplete?, onAbort?)

跟 

router.push

<router-link :to="..." replace>

router.replace(...)

**注意：**

如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 

/users/1

/users/2

beforeRouteUpdate

# 

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 

window.history.go(n)

[code]// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

# 操作 History

你也许注意到 

router.push

router.replace

router.go

window.history.pushState

window.history.replaceState

window.history.go

window.history

因此，如果你已经熟悉 Browser History APIs，那么在 Vue Router 中操作 history 就是超级简单的。

还有值得提及的，Vue Router 的导航方法 (

push

replace

go

history

hash

abstract