需求要在列表页点击查看详细页后返回,页面不刷新,还在那一块
网上App.vue教程都是
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
之类的,实际我的项目没有生效
按照页面f12的提示修改:
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
这样我的项目才生效
当然还有路由js的修改
{
path: "/HomePage",
name: "HomePage",
component: () =>
import("../views/HomePage.vue"),
// 新增
meta:{
keepAlive: true, //此页面需要缓存
},
},
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
// 新增
scrollBehavior(to,from,savePosition){
if(savePosition){
//解决页面从列表页跳转到详情页返回,初始在原来位置
return savePosition
}else{
//解决页面跳转后页面高度和前一个页面高度一样
return {x:0,y:0}
}
}
});
详细页面添加:(防止详细页一直显示的都是第一次点击的内容)
// keep-alive打开,和created()等一级,是keep-alive的钩子函数
activated () {
this.getArticleDataById(this.$route.query.id); // 读取详细页信息的方法
},
// keep-alive销毁,避免缓存数据,否则切换详情视图隔一会才变化
deactivated () {
this.articleData = {} // 置空详细页显示的数据
}
返回采用this.$router.back();
和history.go(-1);
都可以, 不能采用this.$router.push('/HomePage');