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

一、目标

实现原生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,//是否缓