除了使用 <router-link>
创建 a
标签来定义导航链接,我们还可以 借助 router
的实例方法,通过编写代码来实现。
声明式 | 编程式 |
---|---|
<router-link :to="..."> |
router.push(...) |
该方法的参数可以是⼀个字符串路径,或者⼀个描述地址的对象。例如
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId:'123' }})
// 带查询参数,变成 /register?plan=private
this.$.push({ path: 'register', query: { plan:'private' }})
前进后退
// 在浏览器记录中前进⼀步,等同于 history.forward()
this.$router.go(1)
// 后退⼀步记录,等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录
this.$router.go(3)
// 如果 history 记录不够⽤,那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)