编程式路由导航

作用： <router-link>渲染最后是<a>标签, 但是实际可能需要一个按钮图片等实现路由跳转，编程式导航不借助<router-link>实现路由导航，让路由跳转更加灵活。
具体编码：

vue

<template>
  <div>
    <ul>
      <li v-for="message in messageList" :key="message.id">
        <!-- 跳转路由携带params参数，to的字符串写法       -->
        <router-link :to="`/home/message/detail/${message.id}/${message.content}`">{{message.content}}</router-link> |
        <!-- 跳转路由携带params参数，to的对象写法       -->
        <router-link :to="{
          name: 'mingxi',
          params: {id: message.id, content: message.content}
        }">{{message.content}}</router-link>
        <button @click="pushView(message)">push方式查看</button>
        <button @click="replaceView(message)">replace方式查看</button>
      </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
    return {
      messageList:[
        {id:"001", content: "消息1"},
        {id:"002", content: "消息2"},
        {id:"003", content: "消息3"},
      ]
    }
  },
  methods:{
      // 路由跳转push方式
    pushView(message){
      this.$router.push({
        name: 'mingxi',
        params: {id: message.id, content: message.content}
      })
    },
    // 路由跳转replace方式
    replaceView(message){
      this.$router.replace({
        name: 'mingxi',
        params: {id: message.id, content: message.content}
      })
    }
  }
}
</script>

提示

replace 不会在浏览器得历史记录中加，只会替代掉最后一条记录(这个比较好用) push是追加历史记录

前进后退实现：

vue

<template>
  <div>
    <h2>Vue Router Demo</h2>
    <button @click="forward">前进</button>
    <button @click="back">后退</button>
    <button @click="go">跳转到指定历史</button>
  </div>
</template>

<script>
export default {
  name: "Banner",
  methods:{
    forward(){
      this.$router.forward()// 前进
    },
    back(){
      this.$router.back() // 后退
    },
    go(){
      this.$router.go(1) // 正数：前进n, 负数：后退n
    }
  }
}
</script>

编程式路由导航 ​

编程式路由导航