浅谈使用keepAlive缓存数据,但有时需要重载组件的问题(附代码)

一.背景,公司做了一个h5的轻应用,但在回退时由于活动Id不存在,导致报错,但直接使用keepAlive会导致其他活动Id的页面不会改变
二.解决思路
1.利用keepAlive来缓存数据(其中有一个问题,在下面代码中进行说明);
2,使用this.reload()来重载页面,
3,利用beforeRouteEnter(to,form,next)中的form.fullpath判断进入该组件的路由是谁
三.代码详解
1.App.vue

2.需要使用缓存的组件actPro.vue

问题出现:请看下图
点击参与摇号是活动id为undefined,这大概是由于活动id来自于 this.$route.params.id;

 activityId: this.$route.params.id

所以为了参与成功,我们需要

this.actId = this.$route.params.id;
///////////////////////
service.joinActivity({
                id: Number(this.userId),
                activityId: this.actId,
            }).then( ({data}) => {
                console.log(data.data)
                if(!data.rtnCode) {
                    Toast('参与摇号成功！')
                    this.$router.push({
                        name: 'waitLot',
                        params: {
                            id: this.actId
                        }
                    })
                }else {
                    Toast(data.msg)
                }
            })

三.路由中配置meta:{keepAlive:true},true为需要缓存的组件
router.js

	{path: '/',name: 'index',component: index,meta:{title:"活动订票",keepAlive:true}},
    {path:'/actPro',name:'actPro',component:actPro,meta:{title:"活动订票",keepAlive:true}},
    {path:'/cancelInvi',name:'cancelInvi',component:cancelInvi,meta:{title:"活动订票",keepAlive:false}},
    {path:'/selec',name:'selec',component:selec,meta:{title:"添加好友",keepAlive:false}},

ps:翻越高山总是很辛苦,但收获"一览众山小"的喜悦会让我们觉得这种付出是值得的;

pps:面对代码很长的文章,大家不要轻易关闭,也许解决办法就是其中的几行代码,我们要尝试理解对方的思路

与君共勉.