Vue组件keepAlive实现返回上一页保存原数据
在页面中输入搜索条件跳转到详情页,从详情页返回要保留原页面输入的搜索条件及搜索的结果。效果如下:这里用到了vue的内部组件keepAliverouter.js注:列表页需要缓存 keepAlive: true,详情页不需要缓存 keepAlive: falseroutes: [{path: '/',name: 'index',//component: Homecomponent: () =>
·
在页面中输入搜索条件跳转到详情页,从详情页返回要保留原页面输入的搜索条件及搜索的结果。效果如下:
这里用到了vue的内部组件keepAlive
router.js
注:列表页需要缓存 keepAlive: true,详情页不需要缓存 keepAlive: false
routes: [
{
path: '/',
name: 'index',
//component: Home
component: () => import('./views/index/index.vue'),
meta: {
keepAlive: true // 需要缓存
}
},
{
path: '/content/:contentId',
name: 'content',
component: () => import('./views/index/content.vue'),
meta: {
keepAlive: false // 不需要缓存
}
},
]
App.vue
<template>
<div id="app">
<!-- <router-view/> -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
更多推荐
已为社区贡献7条内容
所有评论(0)