如何解决我该如何使Keepalive在Vue中工作?
页面列表中有表格,表格和分页。从detail.vue
返回后,我想保持表单输入,表数据和当前页数不变,但是每次都会刷新。
我需要将表单数据,表格数据和页码存储在某个地方以使其起作用吗?谢谢。
路由器
{
path: '/list',name: 'List',component: resolve => require(['@/pages/list'],resolve),Meta: {
keepAlive: true
}
}
App.vue
<div class="app">
<keep-alive>
<router-view v-if="$route.Meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.Meta.keepAlive"></router-view>
</div>
list.vue
分页位于组件ListTable内
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="MID" prop="name">
<el-input v-model="form.mid" />
</el-form-item>
<el-form-item label="Name" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="Birthdate" prop="birthdate">
<el-date-picker
v-model="form.birthdate"
value-format="yyyy-MM-dd"
/>
</el-form-item>
</el-form>
<ListTable ref="childTable" :listdata="listData" :currpage="currPage" />
</div>
</template>
<script>
export default {
name: 'MemberList',components: {
ListTable: () => import('@/components/Membership/ListTable')
},data() {
return {
currPage: 1,listData: [],form: {
mid: '',name: '',birthdate: '',}
}
},mounted() {
this.fetchData()
},methods: {
fetchData() {
// get list data
this.listData = ***
.....
},}
</script>
解决方法
首先,您需要将组件的键设置为keep-alive
,这会在渲染的组件之间产生差异
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
第二,您应该将ListTable放置到另一个keep-alive
中,以告知vue您也要存储呈现的组件
<keep-alive>
<ListTable ref="childTable" :listdata="listData" :currpage="currPage" :key="currPage"/>
</keep-alive>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。