Vue SPA 实现类似App前进刷新后退不刷新

向右看齐 2022-03-28 13:16 310阅读 0赞

一、目标

实现原生app页面缓存效果，前进刷新页面，后退不刷新页面，同级不刷新页面

二、分析

1、如何判断页面是前进还是后退？

2、如何在前进后退时控制是否刷新？

三、思路

1、为每个页面定义一个变量来表示当前所在的层级（比如：A -> B -> C ，A的层级为1，B的层级为2，C的层级为3）

2、在页面每次切换时判断当前显示的页面和即将显示的页面的层级关系，即可知道是前进还是后退(例如: A -> B，判断A页面与B页面层级关系，如果A页面层级小于B页面则为前进，反之为后退)。

3、利用vue导航守卫判断层级关系，动态的改变路由缓存，（即改变路由对象的keepAlive得值）

四、实现

路由文件，自定义tree为当前页面的层级

ps：keepAlive默认全部为true,如果某页面不需要缓存可使用 this.$destroy(true ); 来销毁当前组件

const routers=[
        {
            path: '/test',
            name: 'test',   //财务查询页
            component: resolve => require(['@/page/test/test'], resolve),
            meta:{
                title : '测试页', // 标题设置在这里
                keepAlive : true,//是否缓存当前页面
                tree: 4,
            }
        },
        {
            path: '/list1',
            name: 'list1',   //财务查询页
            component: resolve => require(['@/page/test/list1'], resolve),
            meta:{
                title : '测试页', // 标题设置在这里
                keepAlive : true,//是否缓存当前页面
                tree: 1,
                Loaded: false,//是否已加载过
            }
        },
        {
            path: '/list2',
            name: 'list2',   //财务查询页
            component: resolve => require(['@/page/test/list2'], resolve),
            meta:{
                title : '测试页', // 标题设置在这里
                keepAlive : true,//是否缓存当前页面
                tree: 2, 
            }
        },
        {
            path: '/list3',
            name: 'list3',   //财务查询页
            component: resolve => require(['@/page/test/list3'], resolve),
            meta:{
                title : '测试页', // 标题设置在这里
                keepAlive : true,//是否缓存当前页面
                tree: 3, 
            }
        },
    ]
    
    export default routers;

导航守卫

router.beforeEach ( (to, from, next) => {
        if(from.meta.tree > to.meta.tree) {
            // 后退,上一层级页面缓存
            from.meta.keepAlive = false;
            to.meta.keepAlive = true;
    
        } else if(from.meta.tree < to.meta.tree) {
            // 前进,下一层级重新加载
            from.meta.keepAlive = true;
            to.meta.keepAlive = false;
        }else {
            // 同一层级,页面缓存
            from.meta.keepAlive = true;
            to.meta.keepAlive = true;
        }
        next();
    })

app.vue模板标签

下一篇 : [vue路由切换动画，前进左滑，后退右滑][vue]

[vue]: https://blog.csdn.net/qq_33081841/article/details/86244689