标签：div export tran == ted 数据 efi 不刷新 patch
问题 在路由切换时不需要每次 点击都刷新子路由 尤其是在form表单的情况下 不能让用户 输入一半之后点击其他页面 再点回来 表单数据不见了
解决方案
vue 2.0 之中 有keep-alive 详情 见Vue 官网
<keep-alive>
<router-view :key="key"></router-view>
</keep-alive>
如果想要这个 单个子路由 不刷新 只需要控制 key key值不变 缓存 一直存在 想要路由刷新 将key值 改为 前面没有的
<template>
<section class="app-main">
<transition name="fade" mode="out-in">
<keep-alive>
<router-view :key="key"></router-view>
</keep-alive>
</transition>
</section>
</template>
<script>
export default {
name: ‘AppMain‘,
computed: {
key() {
if(this.$route.name==undefined&& this.$route.path==‘/home‘){
//页面第一次加载时 清空 tab 标签页上的所有标签 回到首页
this.$store.dispatch(‘delAllViews‘)
}
let onlykey = ‘‘
let clicked = ‘‘
if(!this.$route.meta.clicked){
onlykey = this.$route.path +"0"
clicked = ‘0‘
}
else{
//上一次的状态为0
if(this.$route.meta.clicked==‘0‘){
//这一次有参数
if(Object.keys(this.$route.query).length!=0 || this.$route.hash==‘#new‘){
onlykey = this.$route.path +"1"
clicked = ‘1‘
}
//这一次无参
else{
onlykey = this.$route.path +"0"
clicked = ‘0‘
}
}
//上一次的状态不是0
else{
//这一次有参数
//在创建新活动时 传入 hash = new
if(Object.keys(this.$route.query).length!=0 || this.$route.hash==‘#new‘){
//这一次的状态 为上一次+1
//获取上一次的状态
clicked = (parseInt(this.$route.meta.clicked)+1).toString();
onlykey = this.$route.path +clicked
}
//这一次无参 这一次状态不变
else{
clicked = parseInt(this.$route.meta.clicked).toString();
onlykey = this.$route.path +clicked;
}
}
}
this.$route.meta.clicked = clicked;
return onlykey
}
},
}
</script>
代码仅供参考 （业务比较复杂 写了一大推逻辑）!
标签：div export tran == ted 数据 efi 不刷新 patch
原文地址：http://www.cnblogs.com/xuewuhen/p/7860701.html
