（四、编程式导航）

编程式导航

在vue实例内部，可以通过$router访问路由实例。因此可以调用this.$router.push

(一、) router.push

• （1）想要导航到不同url，则使用router.push方法。这个方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的url。
• （2）当点击<router-link>时，这个方法会在内部调用，所以点击<router-link :to="...">等同于调用router.push(...)。
• 例：

// 字符串
router.push('home')

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

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

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

注：如果提供了path，params会被忽略，query不属于这种情况。取而代之的是下面例子的做法，提供路由的name或手写完整的带有参数的path：

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属性。

（二、）router.replace

• （1）router.replace
• （1.1）跟router.push很像，唯一不同的是，它不会向history添加新纪录，而是替换掉当前的history记录。
  
• （2）router.replace与router.push

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

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

在2.2.0+中，在router.push或router.replace中提供onComplete和onAbort回调作为第二个和第三个参数。这些回调会在导航成功完成（在所有异步钩子被解析之后）或终止（导航到相同的路由、或在当前导航到另一个不同的路由）时进行相应的调用。在3.1.0+，可以省略第二个到第三个参数，此时如果支持Promise，router.push或router.replace将返回一个promise

注：如果目的地和当前路由相同，只有参数发生了改变（如：/users/1 -> /users/2），需要使用beforeRouterUpdate来响应这个变化。

（3.）router.go(n)

这个方法参数是一个整数，意思是在history记录中向前或向后退多少步，类似window.history.go(n)。

例：

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

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

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

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