需求:
1:页面一数据由接口返回,修改部分数据,
2:数据仅前端页面调整,暂未提交修改数据库。
3:页面一跳转页面二,再由页面二返回页面一
4:页面一数据仍为修改后的数据
实现:
1:借用方式:keep-alive
2:keep-alive是vue中的一个内置组件,主要是将组建缓存到内存中,避免切换路由的时候页面刷新从而导致dom的重新渲染
一:在app.vue中添加keep-alive标签。
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
二:在router文件下的相关路由中,添加meta。
{
path: '/demo',
name: 'demo',
component: demo,
meta:{
keepAlive:true // 需要缓存
}
},
三:在页面二中进行配置
方法一: 在页面二中,添加beforeRouteLeave
所有从当前页面返回上一页面的方式
beforeRouteLeave(to,from,next){
to.meta.keepAlive = true
next(0)
}
方法二: 在页面二中,返回跳转按钮方法初修改路由返回方式
通过某按钮返回的方式
// oldCode:不生效
this.$router.go(-1)
// newCode:改为
this.$router.back()