学习网站的设置和网页的发布,安徽省建设厅查询网站,做娱乐网站需要哪些,北京网站建设建设公司一、问题描述 在某些情况下#xff0c;vue项目前端有些情况下需要设置路由跳转#xff0c;页面不刷新#xff0c;比如:
前进导航刷新页面#xff0c;后退不刷新#xff0c;page1–page2–page3#xff0c;每次前进到一个新页面都需要获取数据#xff0c;而按下…一、问题描述 在某些情况下vue项目前端有些情况下需要设置路由跳转页面不刷新比如:
前进导航刷新页面后退不刷新page1–page2–page3每次前进到一个新页面都需要获取数据而按下后退键后不再获取新数据而是使用之前缓存的数据 Tab也之间切换某些页面不需要刷新因为刷新页面会重置用户的过滤条件对用户体验十分不友好 二、什么是keep-alive keep-alive顾名思义保持活跃。保持谁活跃呢 首先我们知道因为vue就是组件化编程一个.vue文件就是一个组件。就像万事万物一样都有从出生到消亡的生命周期过程vue的组件也是一样也有自己的生命周期比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据destroy把组件实例销毁。 所以使用keep-alive就是保持组件活跃不会被destroy销毁掉就一直还活着组件没有被销毁掉的话组件上挂载的数据就还存在所以状态就可以保留所以keep-alive就可以保持组件的状态。
三、keep-alive属性
include 值为字符串或者正则表达式匹配的组件会被缓存。
exclude 值为字符串或正则表达式匹配的组件不会被缓存。
四、生命周期 当组件在 内被切换它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated 在 keep-alive 组件激活时调用
使用 keep-alive 会将数据保留在内存中如果要在每次进入页面的时候获取最新的数据需要在 activated 阶段获取数据承担原来 created 钩子函数中获取数据的任务
2.deactivated 注意 只有组件被 keep-alive 包裹时这两个生命周期函数才会被调用如果作为正常组件使用是不会被调用的以及在 2.1.0 版本之后使用 exclude 排除之后就算被包裹在 keep-alive 中这两个钩子函数依然不会被调用另外在服务端渲染时此钩子函数也不会被调用
五、keep-alive的用法 5.1、include/exclude用法
// include 只缓存组件名字为home的组件其他组件不会缓存而exclude恰好相反
keep-alive includehomerouter-view /
/keep-alive
5.2、keep-alive结合路由中的meta属性来控制组件缓存 5.2.1 根据需要设置路由是否需要缓存
{path: /,name: home,meta: {keepAlive:true},component: Home
}
5.2.2 router-view中判断时候需要keep-alive缓存控制
keep-aliverouter-view v-if$route.meta.keepAlive /
/keep-alive
router-view v-if!$route.meta.keepAlive /
六、产生问题 组件被缓存当关闭菜单路由并没有被销毁所以组件在切换的时候也就不会被重新创建也就不会调用created等生命周期函数
解决方法 使用activated与deactivated来获取当前组件是否处于活动状态我在home组件里面写入了activated与deactivated生命周期函数 activated组件激活时调用
activated(){ // 进入home组件就会打印 console.log(“路由被激活初始化路由”) } deactivated组件停用时调用
deactivated(){ // 关闭home组件就会打印 console.log(“路由被销毁销毁路由”) } 七、钩子函数的执行顺序 不使用keep-alive beforeRouteEnter -- created -- mounted -- destroyed
使用keep-alive beforeRouteEnter -- created -- mounted -- activated -- deactivated 再次进入缓存的页面只会触发beforeRouteEnter --activated -- deactivated created和mounted不会再执行
