4、编程时导航

介绍

学习vue-router的一些学习笔记，所有笔记内容请看 vue-router学习笔记

编程时导航

除了使用创建a标签来定义导航链接，还可以使用router.push()方法，通过编码实现，如下所示：

router.push(location,onComplete?,onAbort?)
在vue实例内部，可以通过$route 访问路由实例，可以使用this.$route.push()
方法

route.push()方法会向History栈添加一个新的记录，当用户点击浏览器的后退按钮时，则可以回到之前的URL
点击时，这个方法会在内部调用router.push()方法，所以点击等同于调用router.push()方法

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 并不属于这种情况。
如下所示情况：

const userId = '123'
router.push({name :'user',params:{ userId}}) // ->/user/123
router.push({path:`/user/${userID}`})

// 此处params不生效
router.push({path:'register',params:{userID}})// ->/user

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

router.replace()

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

类似于router.push ,不同在于，不会想history 添加新纪录，而是替换当前的history记录

<router-link :to=".." replace>   等价于router.replace(..)