您好,登录后才能下订单哦!
这篇“Vue怎么实现前端页面缓存”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue怎么实现前端页面缓存”文章吧。
在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,
比如:
在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回,如果不加任何处理,列表页面会重新加载,默认显示第一页数据,而不在是之前的第三页,这样如果还需要查看之前查看数据的下一条时,还需要切换到第三页,如此反复。
在列表页面进行条件筛选查询,查询到对应的数据后查询详情,跳转详情页面,然后在返回,列表默认会清空查询条件,显示所有数据。
以上两种情景都会带来很不好的用户体验。此时,就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。
Vue中提供了一个内置组件keep-alive,使用<keep-alive>元素将动态组件包裹起来,内部组件就会被缓存起来。
<keep-alive>包裹的组件,加载过的页面,再次进入时,是不会执行页面第一次进入时的部分生命周期函数。
<keep-alive>包裹的组件会新增两个生命周期函数activated和deactivated.
两个属性include和exclude可以让<keep-alive>实现有条件的进行缓存。include包含的组件会被进行缓存,exclude包含的组件不会被缓存。
通过keep-alive实现路由页面缓存有两种如下两种方式:
(一)、使用include控制需要缓存的页面
// home.vue <template> <div> ... <keep-alive :include='cashViews'> <router-view></router-view> </keep-alive> </div> </template> <script> export default{ data() { return { // 要缓存的组件 cashViews: ['list'] } } } </script>
// list.vue <script> export default{ // 在组件内路由守卫钩子函数中处理逻辑 beforeRouteEnter (to, from, next) { if (from.name === 'Index') { // 处理页面缓存后,返回首页再次进入缓存页时数据为更新 // 该生命周期无法获取到this,因此把vm实例当作参数传递 next(vm => { vm.pages.pageNum = 1 // 因为我这里查询表单是动态的,所以首页进入时需要调用一次,在改方法中请求返回后调用了获取列表数据getTableDatas方法 vm.getQueryList() }) } else if (!from.name) { // 处理刷新页面时,获取动态表单方法未执行,导致表单无法加载 next(vm => { vm.getQueryList() }) } else { // 详情返回时只更新列表数据,因为如果在详情页面做了操作,列表数据状态会改变,其他使用缓存 next(vm => { vm.getTableDatas() }) } } } </script>
以上实现,是针对我自己项目业务场景的实现,如果查询表单不是动态获取的,是页面写死的,可以在activated钩子中调用查询列表数据方法。这样每次进入的缓存页面的时候,只会更新列表数据,不会改变其他缓存。
问题:同样会存在,列表缓存数据后,返回首页,再次进入列表页面,缓存数据还在,这样可以在路由守卫beforeRouterLeave钩子中处理。
activated() { this.getTableDatas() }, beforeRouterLeave(to, from, next) { if (from.name === 'Index') { // 如果从首页进入时调用重置方法 this.reset() } }
两点注意:
要缓存的路由组件必须设置name属性,跟cashViews中的值对应;
如果要缓存的组件比较多时,可以使用vuex管理cashViews。
(二)、根据v-if控制显示的router-view
在路由表routes中配置meta属性,新增keepAlive属性,需要缓存的页面设置keepAlive为true.
{ path: '/list', name: 'List', component: List, meta: { keepAlive: true } }
根据当前访问路由的keepAlive值控制是否缓存组件
// home.vue <template> ... <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </template>
在组件的守卫钩子中修改keepAlive的值,控制页面缓存与否
// List.vue export default { /* 从List组件离开时,修改keepAlive值为false,保证进入该页面时页面刷新 */ beforeRouteLeave(to, from, next) { from.meta.keepAlive = false next() } }
// Detail.vue export default { /*从Detail返回List时,修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面 */ beforeRouteLeave(to, from, next){ if(to.name === 'List') { to.meta.keepAlive = true } next() } }
routes:[ { path: 'index', component: notice, meta: { keepAlive: true // 是否缓存标志 } } ]
主要设置元信息(keepAlive)代表页面需要缓存
<keep-alive> // 将需要缓存得页面写在keep-alive里面 <view-router v-if="$route.meta.keepAlive"></view-router> </keep-alive> // 不需要缓存得页面写在外面 <view-router v-if="!$route.meta.keepAlive"></view-router>
页面路由跳转时将需要缓存的页面血再keep-alive标签之中,不需要缓存得页面直接显示
注: 缓存页面会使页面增加两个生命周期 activated,deactivated
其他页面进入则从新加载数据
在需要缓存的页面加入如下代码
// 在进入页面时先判断是否是从详情页面返回 beforeRouterEnter (to, from, next) { if(to.path === '/detail') { this.$route.meta.isBack = true } next() }, activated () { // 如果不是从详情页面返回,则重新加载数据 if (!this.$route.meta.isBack) { //加载页面数据 } // 从新设置页面得路由元信息 this.$route.meta.isBack = false }
进入页面先判断是否从详情返回,从详情返回在页面路由元信息中加入标志,在页面加载过程中判断是否从详情返回,是则不加载数据,否则从新加载页面数据, 最后需要再次设置页面路由元信息,防止下回默认isBack: true,其他页面进来不加载数据
以上就是关于“Vue怎么实现前端页面缓存”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。