VUE 返回上一页 不刷新页面


应用场景:

  当前我有一个列表页一个详情页,我希望我进入详情页以后再返回列表页时,列表页仍然能保留我进入详情页前的样子

解决方法:

1、我们需要在router设置中添加keep-alive属性

{
            isShow: true,
            permissionCode:"Meeting_Approve",
            icon: "",
            title: "会议审批",
            path: 'approvalManOfMeetings',
            name: 'approvalManOfMeetings',
            meta: {
                keepAlive: true    //true为需要缓存,false为不需要缓存(不需要的也可以不加)
            },
            component: () => import('./approvalManOfMeetings.vue')
        },

2、 在App.vue中为不需要刷新的路由添加keep-alive组件,最后修改成如下模样:

3、当我们需要从详情页返回到列表页的时候,详情页中只有使用this.$router.back()进行返回,我们想要的返回后列表页不刷新的效果才能生效

注:我在使用过程中注意到,当我不小心把详情页的路由配置页也加上了 keepAlive: true 以后,返回列表页后仍然被刷新了。暂时还没深究其中的问题,但是如果遇到相同问题的小伙伴可以试着查一下是不是因为这个原因导致返回后缓存失效页面被刷新。

vue