Vue 编程式路由导航

一、作用

不借助<router-link>实现路由跳转

二、路由 (push replace)

借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似

1、push

触发

<button @click="pushShow(m)">push</button>

方法

name 是 path的别名， params 传递参数的一种方式

methods: {
  pushShow(m){
      this.$router.push({
          name:'detail',
          params:{
              // key value
             id: m.id,
             title: m.title 
          }
      })
  },
}

2、replace

触发

<button @click="replaceShow(m)">replace</button>

方法

methods: {
    replaceShow(m){
      this.$router.replace({
          name:'detail',
          params:{
              id:m.id,
              title:m.title
          }
      })
  }
}

三、导航 （back forward go）

1、back

与浏览器自带的回退一样

$router.back()

2、forward

与浏览器自带的前进一样

$router.forward()

3、go

$router.go(n)

n为正数，则前进n步，n为负数，则后退n步

触发

<button @click="backButton">back</button>
<button @click="forwardButton">forward</button>
<button @click="goButton">go</button>

方法

 methods: {
    backButton(){
        // 后退
        this.$router.back()
    },
    forwardButton(){
        // 前进
        this.$router.forward()
    },
    goButton(){
        // 正数 前进 n，负数 后退 n
        this.$router.go(2)
    }
},