方法一（暂时存储在sessionStorage）
修改资料的时候，比如修改姓名，点击修改头像会跳转其他面，再回来时刚修改的姓名会恢复原始数据，下面就是解决这个问题：
HTML：
<div @click=”picture”>
<div class=”touW”>头像</div>
<i class=”right”>
<img :src=tu >
</i>
</div>
<li>
<span class=”mingC”>姓名</span>
<span class=”right”><input v-model=”username”/></span>
</li>
return定义：
return {
url: {},
tu: ”,
username: ”,
}
mounted里：
mounted() {
//如果没有跳转页面，则是正常的接口
if (!sessionStorage.getItem(“onece”)||sessionStorage.getItem(“onece”)==0) {
// 名字接口
this.$http.get(…地址, {
}).then(response => {
this.username = response.data.data.name;
}),
// 头像接口
this.$http.get(…, {
}).then(response => {
this.url = http;
this.tu = that.url + response.data.data.path
})
//跳转头像页面就会暂时保存在sessionStorage里
}else{
var obj=JSON.parse(sessionStorage.getItem(“item”))
// 头像接口
this.$http.get(…, {
}).then(response => {
this.url = http;
this.tu=this.url+response.data.data.path
}),
// 名字接口
that.username=obj.username,
}
}
methods里：
methods: {
save(){
var obj={username:this.username,param:this.param,birth_day:this.birth_day,address:this.address,address1:this.address1,address2:this.address2,selectList:this.selectList,selectoption:this.selectoption,introduction:this.introduction}
sessionStorage.setItem(“item”,JSON.stringify(obj))
},
picture: function () {
this.$router.push(‘跳转的页面’)
sessionStorage.setItem(“onece”,1)
this.save()
}
}
方法二（vue缓存机制include）
app.vue
<template>
<div id="app">
<keep-alive :include="cacheList">
<router-view ></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
cacheList() {//缓存页面
return this.$store.getters.cacheList
}
}
}
</script>store全局参数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {//这里放全局参数
cacheList: []//缓存页面
},
getters:{//这里是get方法
cacheList:state=>state.cacheList
},
mutations: {//这里是set方法
PUSH_CACHENAME:(state, name) => {
if (state.cacheList.indexOf(name) == -1) {
// console.log('PUSH_CACHENAME-----', name)
state.cacheList.push(name)
}
// console.log('cacheList-------', state.cacheList)
},
DEL_CACHENAME:(state, name) => {
const index = state.cacheList.indexOf(name)
if (index >= 0) {
// console.log('DEL_CACHENAME-----', name)
state.cacheList.splice(index, 1)
}
// console.log('cacheList-------', state.cacheList)
},
},
actions: {
pushCacheName:({commit}, name) => {
commit('PUSH_CACHENAME', name)
},
delCacheName:({commit}, name) => {
commit('DEL_CACHENAME', name)
},
},
modules: {
}
})
使用方法：
//需要缓存的页面
mounted(){
// 页面缓存
this.$store.dispatch('pushCacheName', this.$route.name)
}
// 首页或者需要去除页面缓存方法
this.$store.dispatch('delCacheName', '页面名称')