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>