Table of contents
1. Use
Instead of using <router-link>
tags, use the api in $router to achieve jumps, which is more flexible
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{
{m.title}}</router-link> -->
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link :to="{
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{
id:'001',title:'消息001'},
{
id:'002',title:'消息002'},
{
id:'003',title:'消息003'}
]
}
},
methods: {
pushShow(m){
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}
},
}
</script>
this.$router.push()
It is a push operation, you can go back to all the previous history records,
this.$router.replace()
it is a replacement operation, you can’t go back to the last history record
this.$router.back()
, and you can roll back a record, which is consistent with the usage of history.back() and
this.$router.forward()
advances a record, and history.forward() ① go(0): Refresh the current page
this.$router.go()
② history.go()
go (negative integer): go back n records ③ go (positive integer): forward n records