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

    声明式 编程式
    <router-link :to="..."> router.push(...)

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

    1. // 字符串
    2. this.$router.push('home')
    3. // 对象
    4. this.$router.push({ path: 'home' })
    5. // 命名的路由
    6. this.$router.push({ name: 'user', params: { userId:'123' }})
    7. // 带查询参数,变成 /register?plan=private
    8. this.$.push({ path: 'register', query: { plan:'private' }})

    image.png
    前进后退

    1. // 在浏览器记录中前进⼀步,等同于 history.forward()
    2. this.$router.go(1)
    3. // 后退⼀步记录,等同于 history.back()
    4. this.$router.go(-1)
    5. // 前进 3 步记录
    6. this.$router.go(3)
    7. // 如果 history 记录不够⽤,那就默默地失败呗
    8. this.$router.go(-100)
    9. this.$router.go(100)