Vue学习：编程式路由导航（不借助router-link进行路由跳转）

使用router-link标签进行路由跳转--》最终是转换成a标签，但是有些时候跳转不是a标签 是按钮也可以

<router-link :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
</router-link>

有两个按钮：push查看 replace查看

    <router-link :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
   <router-link replace :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">

替换

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

使用$router进行操作--替换router-link m参数是上面传递

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

使用指针进行一定

后退和前进按钮，听从路由器的

go传入3前进3步 负数后退 .$router.forward()$router.back()$router.go(3)

        methods: {
            back(){
                this.$router.back()
                // console.log(this.$router)
            },
            forward(){
                this.$router.forward()
            },
            test(){
                this.$router.go(3)
            }
        },