不借助route-link来实现页面跳转

<template>
 <div>
 	<ul>
 		<li v-for="m in messageArr" :key="m.id">
 		<router-link
 		:to="{
  			name:'detail',
           	 query: { id: m.id, title: m.title },
         	 }"
 		active-class="active"
          >{{ m.title }}</router-link
        >
 <!-- props传参的params写法 -->
 <!-- <router-link  :to="`/Home/Message/Detail/${m.id}/${m.title}`" active-class="active">{{ m.title }}</router-link> -->
 		<button @click="pushShow(m)">push查看</button>
        <button @click="replaceShow(m)">replace查看</button>
 		&nbsp;&nbsp;
 		</li>
 	</ul>
 	<hr />
 	<router-view></router-view>
 </div>
</template>

<script>
export default {
  name: "Message",
  data() {
 return {
      messageArr: [
        { id: "001", title: "消息1" },
 { id: "002", title: "消息2" },
 { id: "003", title: "消息3" },
      ],
    };
  },
  methods:{
    pushShow(m){//效果和route-link类似但是点击按钮后跳转，而是push还是replace就决定了页面操作有没有回退功能
      this.$router.push({  name:'detail',
            params: { id: m.id, title: m.title },})
    },
    replaceShow(m){
    this.$router.replace({  name:'detail',
            params: { id: m.id, title: m.title },})
    }
  }
};
</script>