vue-router编程式的导航

什么是编程式的导航

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

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

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

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

HTML代码

<p @click="$router.push('/test/emitView')">跳转1</p>
<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>
<p @click="test">带参数的跳转</p>
<p @click="test1">提供了path，params会被忽略</p>
<p @click="$router.push({path: `/test/propsView/${userId}`})">
    url变为/test/propsView/123
</p>
<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">
    带参数的url变为/test/propsView?plan=private
</p>

Script中代码

test () {
    this.$router.push({
        name: 'routerView',
        params: {userId: this.userId, test: 333},
    })
    console.log(this.$route)
    console.log(this.$route.params)
},
test1 () {
    this.$router.push({ // 如果提供了 path，params 会被忽略
        path: 'routerView',
        params: {userId: this.userId, test: 333},
    })
    console.log(this.$route)
    console.log(this.$route.params)
},

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

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

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

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

// 如果 history 记录不够用，则无反应
router.go(-100)
router.go(100)

router.back()

在浏览器记录中后退一步

router.forward()

在浏览器记录中前进一步