Vue2：编程式路由页面跳转

一、情景说明

在前面，我们学习了通过router-link标签，实现路由页面跳转
但是，它有局限性
就是router-link最终会被替换成<a>标签

如果，我们的跳转按钮是button实现的了？
该如何实现路由页面跳转了？
这里就需要用到编程式路由跳转技术

二、案例

vc组件的跳转按钮

<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>

push式路由跳转
在vc实例的methods中添加方法

            pushShow(m){
                this.$router.push({
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                })
            },

replace式路由跳转
在vc实例的methods中添加方法

            replaceShow(m){
                this.$router.replace({
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                })
            }

三、补充

通过代码实现浏览器的前进、后退功能
vc组件中按钮

            <button @click="back">后退</button>
            <button @click="forward">前进</button>
            <button @click="test">测试一下go</button>

对应的methods方法

        methods: {
            back(){
                //后退1步
                this.$router.back()
                // console.log(this.$router)
            },
            forward(){
                //前进1步
                this.$router.forward()
            },
            test(){
                //前进3步
                // this.$router.go(3)
                //后退3步
                this.$router.go(-3)
            }
        },