vue返回上个页面,页面不刷新,使用vue的keep-alive
1.在路由上添加keepAlive为true,该页面缓存,进去该页面,不会刷新{path: 'list',component: () => import('@/views/merchants/list'),name: 'merchantsList',meta: { title: '商户列表', noCache: false, keepAlive: true }},2.在app.vue添加以下
·
1.在路由上添加keepAlive为true,该页面缓存,进去该页面,不会刷新
{
path: 'list',
component: () => import('@/views/merchants/list'),
name: 'merchantsList',
meta: { title: '商户列表', noCache: false, keepAlive: true }
},
2.在app.vue添加以下内容
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
3.返回到缓存页面使用
this.$router.back()返回
4.如果两个页面同时缓存可能发生,页面路径虽然改变,但是跳转页面仍是上一个缓存页面,这个时候需要在缓存页面使用,路由导航钩子函数做处理
beforeRouteLeave (to, from, next) {
// console.log(to)
// console.log(from)
// 列表页缓存
to.meta.keepAlive = false;
from.meta.keepAlive = false;
next()
},
更多推荐
所有评论(0)