一、情景说明

在前面，我们学习了通过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)}},