编程式导航简述

编程式导航

---

除了使用< router-link >创建< a >标签来定义导航链接以外，还可以使用router的实例方法，通过代码来导航这种方式就叫做编程式导航。要导航到不同的URL，可以使用Router实例的push()方法。该方法的原型如下：

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

其中location可以是一个字符串路径，或者是一个描述地址的对象；onComplete回调作为第二个参数在导航成功完成(在所有的异步钩子被解析之后)的时候调用；onAbort回调作为第三个参数在导航终止(导航到相同的路由，或在当前导航完成之前导航到另一个不同的路由)的时候调用。

在调用router.push()方法的时候会自动向history栈中添加一个新的记录，所以当用户单击浏览器后退按钮时，将回到之前的URL。当单击< router-link >时，router.push()方法会在内部调用，通俗来说，单击< router-link :to="…" >等同于调用router.push(…)。

router.push()方法有多种调用方式。代码如下所示:

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

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

//命名的路由
router.push({ name:'book',params:{ 'bookId: 101' } })

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

要注意的是，如果提供了path，params会被忽略。那么对于/book/:id这种形式的路径应该如何调用router.push()方法呢？一种是通过命名路由，如上例第三种调用方式；一种是在path中提供带参数的完整路径。代码如下所示：

const id = 1;
router.push({ name: 'book', params: { id: book.id } })  //-> /book/1
router.push({ path:'/book/${id}' })  // -> /book/1

除了router.push()方法外，还可以使用Router实例的replace()方法进行路由跳转。与push()不同的是，replace()方法不会向history添加新纪录，而是替换掉当前的history记录。replace()方法的原型如下所示：

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

replace()方法参数与push()方法类似。

replace()方法对应的声明式路由跳转为< router-link :to="…" replace >。