编程式路由导航

message.vue
<template>
  <div>
      <ul>
          <li v-for="(message,index) in messages" :key="message.id">           
         <router-link :to="'/home/message/detail/'+message.id">{{message.title}}</router-link>
         <button @click="pushShow(message.id)">push查看</button>
         <button @click="replaceShow(message.id)">replace查看</button>

      </li>
      </ul>
    <button @click="$router.back()">回退</button>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
       data(){
      return{
          messages:[]
      }
       },

       mounted(){
           setTimeout(()=>{
               const messages=[
               {
                   id:1,
                   title:'message01'
               },
               {
                   id:2,
                   title:'message02'
               },
               {
                   id:3,
                   title:'message03'
               },
               ]
               this.messages = messages
           },300)
       },

    methods:{
      pushShow(id){
        this.$router.push('/home/message/detail/'+id)
      },
      replaceShow(id){
        this.$router.replace('/home/message/detail/'+id)

      }
    }
   } 
</script>

<style>
   
</style>

相关API

1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

3) this.$router.back(): 请求(返回)上一个记录路由

4) this.$router.go(-1): 请求(返回)上一个记录路由

5) this.$router.go(1): 请求下一个记录路由