ajax 关闭 keep alive,vue开启keep-alive需要注意的问题

为了让组件数据缓存，避免每次资源重复加载(例如每次切换导航时数据会重新加载一次，体验真的差)，因此使用了keep-alive，解决了以上产生的问题。

封面.jpg

一、开启keep-alive

在这里keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，所以在vue1.0版本是不支持的。

二、产生的问题

keep-alive能使组件数据缓存，因此。如果有一个新闻列表，点击进入查看详情，返回点击查看其他新闻详情这时发现数据并没有更新，造成了数据不刷新的情况。

因此，我试了以下网友提出的解决方法，发现并没有什么用(或许是我弄错了)。

//在router文件加上meta判断

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

{//home会被缓存

path:"/home",

component:home,

meta:{keepAlive: true}

}

{//hello不会被缓存

path:"/hello",

component:hello,

meta:{keepAlive: false}

}

})

三、我的解决方法

因此，个人拙见，我是这么解决的。在详情组件里监听路由变化再次赋值给ID，通过activated钩子触发请求函数，这时返回详情页面再次进入发现原有的数据还在，但是过几秒后数据就刷新了，数据是刷新了但是体验是非常不好的。因此需要用到另一个钩子deactivated销毁，离开详情页面时(deactivated)通过小技巧把当前的内容隐藏，再次进入详情页面时(activated)就不会看到原来的内容了，然后ajax请求数据完成后把它显示出来即可。

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入(前进或者后退)时，只触发activated。

//$route发生变化时再次赋值listId

watch: {

'$route'() {

this.listId = this.$route.params.id;

}

},

//通过activated钩子触发请求函数

activated() {

this.getDetail();

},

//返回详情页面时 隐藏内容div区块 再进入详情时 显示内容div区块

deactivated() {

this.isShowContent = false;

}

四、2019新发现

使用exclude属性不缓存模板组件即可，没有上面那么复杂了。

//不缓存detail组件