Vue Router(4)

编程式导航

除了使用 router-link, 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

 

导航到不同的位置

注意：在 Vue 实例中，你可以通过 router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

 

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

等价于

router.push(...)

 

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
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 会被忽略）

 

替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

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

等价于

router.replace(...)

 

也可以直接在传递给 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.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。