Vue Router 编程式导航

Vue Router 编程式导航的三种方法和参数传递

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

跳转到指定的 URL，并向 history 栈添加一个新的记录。当用户点击浏览器后退按钮时，则回到之前的 URL。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

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

// 带查询参数，path: '/home?user=microloong'
this.$router.push({ path: 'home', query: { user: 'microloong' }})

用作参数的 params 和 query 的区别：

• path 不能和 params 一起使用，如果提供了 path，params 会被忽略。取而代之的是使用 name 指定路由或手写完整的带有参数的 path（官方文档示例）：

  1 2 3 4 5

  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

  query 不属于上述情况，name 和 path 都通用。

• query 最明显的特征是参数会显示在 url 中，刷新后参数仍存在；而 params 参数不显示，且刷新后会丢失。可理解为 query 相当于发送一次 GET 请求，params 相当于发送一次 POST 请求。

• params 接受参数的方式是 this.$route.params.userId，query 接受参数的方式则是 this.$route.query.userId。这里 router 是 VueRouter 的一个对象，route 是一个跳转的路由对象。

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

跳转到指定 URL，但不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

具体使用方法与上述 router.push(location, onComplete?, onAbort?) 一致。

router.go(n)

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

1
2
3
4
5
6
7
8

// 前进一步记录，等同于 history.forward()
router.go(1)

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

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

注意：n 的取值需要在可用 history 记录的数目范围内。