vue-router编程式导航

编程式导航

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

router.push(location, onComplete?, onAbort)

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

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

当点击 <router-linke> 时, 这个方法会在内部调用, 所以点击 <router-link> 等同于调用 router.push()

• <router-link to=""> 声明式
• router.replace 编程式

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

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

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

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

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

如果提供了 path，params 会被忽略

const userId = '123'

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

router.push({
  // -> /user
  path: '/user',
  params: { userId }
})

如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace(location, onComplete, onAbort)

跟 router.push 很像, 唯一的不同是, 他不会向 history 添加新纪录, 而是跟他的方法名一样, 替换掉当前的 history 记录

• <router-link to="" replace> 声明式
• router.replace 编程式

router.go(n)

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

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

// 后退一步记录 等同与 window.back()
router.go(-1)

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

// 如果 history 不够, 默认失败
router.go(100)
router.go(-100)