一、使用的方法和组件：
1、<keep-alive></keep-alive> 保持
2、this.$router.push(`/home/message/messagedetil/${id}`) 回退的时候回事原来的路径
3、this.$router.replace(`/home/message/messagedetil/${id}`) 回退的时候是上一个路径
4、$router.back() 和$router.back(-1) 都是回退的意思
二、实例代码
```
<li v-for="(message)in messages" :key="message.id">
<router-link :to="`/home/message/messagedetil/${message.id}`">{{message.title}}
<button @click="pushShow(message.id)">push查看
<button @click="replaceShow(message.id)">replace查看
<button @click="$router.back()">回退
export default {
name:'Message',
data () {
return {
messages: []
}
},
mounted () {
// 模拟ajax请求从后台获取数据
setTimeout(() => {
const messages = [
{
id:1,
title:'message01'
},
{
id:2,
title:'message01'
},
{
id:3,
title:'message01'
}
]
this.messages = messages
}, 1000)
},
methods: {
pushShow (id) {
this.$router.push(`/home/message/messagedetil/${id}`)
},
replaceShow (id) {
this.$router.replace(`/home/message/messagedetil/${id}`)
}
}
}
<style scoped>
```
三、demo实现效果：
