[英]How can I make keep-alive working in vue?
页面列表中有表单、表格和分页。 我想在从detail.vue
返回后保持表单输入、表格数据和当前页码不变,但每次总是刷新。
我是否需要将表单数据、表格数据和页码存储在某个地方以使其正常工作? 谢谢。
路由器
{
path: '/list',
name: 'List',
component: resolve => require(['@/pages/list'], resolve),
meta: {
keepAlive: true
}
}
应用程序
<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>
列表.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.