Vue keep-alive 缓存路由和刷新路由
1、路由不缓存的时候:tab左右切换页面都会自动刷新,表现形式:工作台Radio选中,然后点DemoTab,再点会工作台,Radio不选中了<router-view :key="rootkey" style="margin: 5px" />2、加上Keep-alive后,实现Tab切换页面状态保存 ,比如工作台文本框写的123,切换tab回来后还显示123,不会清空<keep-a
·
1、路由不缓存的时候:tab左右切换页面都会自动刷新,表现形式:工作台Radio选中,然后点DemoTab,再点会工作台,Radio不选中了
<router-view :key="rootkey" style="margin: 5px" />
2、加上Keep-alive后,实现Tab切换页面状态保存 ,比如工作台文本框写的123,切换tab回来后还显示123,不会清空
<keep-alive>
<router-view style="margin: 5px"></router-view>
</keep-alive>
3、实现Tab的刷新功能,就是点Tab上的刷新按钮,新增exclude、refreshing ,实现的思路:exclude属性标识哪些页面不缓存,当我们点击刷新按钮的时候,先使用v-if把routerview销毁,然后在重新加载view的时候,给exclude属性加上页面的名称,不缓存。最后在nextTick方法执行后,再把exclude设置成空,表示缓存所有页面
<!-- 缓存路由 -->
<keep-alive :exclude="exclude">
<router-view v-if="!refreshing" style="margin: 5px"></router-view>
</keep-alive>
data方法
data() {
return {
refreshing: false,
exclude: "",
};
},
给路由加一个 componentName
const router = new Router({
routes: [
{
path: "/login",
name: '登录页',
component: () => import('@/common/login/index')
},
{
path: '/',
name: '首页',
component: () => import('@/layouts/PageLayout'),
children: [
{
path: "/welcome",
component: () => import('@/pages/Welcome'),
meta: {
//原组件的名称
componentName: "Welcome"
}
},
{
path: "/demo",
component: () => import('@/pages/DemoPage'),
meta: {
//原组件的名称
componentName: "DemoPage"
}
},
{
path: "/demo2",
component: () => import('@/pages/Demo2'),
meta: {
//原组件的名称
componentName: "Demo2"
}
}
]
}
]
});
刷新方法
//刷新
onReload() {
this.exclude = this.$route.meta.componentName;
this.refreshing = true;
setTimeout(() => {
this.refreshing = false;
this.$nextTick(() => {
this.exclude = "";
});
}, 200);
},
更多推荐
已为社区贡献5条内容
所有评论(0)