vue-router-dynamic-cache v1.0.2

使用文档及使用案例还在持续迭代更新中

vue-router-dynamic-cache

介绍

本软件是基于vue-router及vuex的一种H5单页应用（SPA）的路由组件动态缓存策略实现软件。 本软件能够在不修改vue-router框架源代码，不侵入业务组件代码，不增加业务组件逻辑功能的情况下，实现了H5单页应用中路由组件动态缓存功能，解决了H5单页应用难以实现路由组件前进重新加载，后退不刷新和在应用单次访问会话期间无法保留历史路由组件数据及状态的问题。使应用的用户操作体验更接近于原生应用，是H5单页应用路由组件动态缓存的更优化实现。

本软件包含了以下几个特征：

1. 基于vue-router及vuex的一种H5单页应用（SPA）的路由组件动态缓存策略
2. 不修改vue-router框架源代码，支持vue-router4版本
3. 能够在不侵入业务组件代码，不增加业务组件逻辑功能的情况下，实现H5单页应用路由组件动态缓存，解决H5单页应用难以实现路由组件前进重新加载，后退不刷新功能的问题
4. 保留了应用在单次访问会话期间历史路由组件的数据及状态
5. 为开发者提供了可动态设置不缓存当前页面的功能

使用

使用前注意事项

1. 目前该软件只支持vue-router4版本（不支持vue-router3）
2. 该软件需要使用vuex状态管理

开始步骤

（1）安装依赖包，
（2）配置路由之间的关系，
（3）引入依赖包，
（4）调用依赖包dynamicCacheRouter对router实例进行增强，
（5）调用app.use()注册cecheRouter实例，
（6）在业务组件路由跳转中使用，

使用示例项目请参考vue-router-dynamic-cache使用示例

具体请看下面示例步骤：

1. install 安装

    // `使用组件缓存需要做的第一步`：安装依赖包
    npm install --save vue-router-dynamic-cache

2. 引入及调用

在以下这样的示例项目中：

// `使用组件缓存需要做的第二步`：配置路由之间的关系。按照示例项目的要求，配置示例如下(开发者根据需求动态调整)

const routes = [
    {
        path: '/',
        name: 'Root',
        component: () => import('@/pages/layout.vue'),
        redirect: '/home',
        children: [
            {
                path: '/home',
                name: 'Home',
                meta: {
                    name: '首页',
                    title: '新闻首页',
                    keepAlive: true, // 为true的话，该组件将永远不销毁（请慎用）
                    cacheRouterNext: ['NewsList'], // 从首页进入新闻列表，列表页不缓存，每次重新初始化
                },
                component: () => import('@/pages/home/index.vue'),
            }
        ],
    },
    {
        path: '/news/list',
        name: 'NewsList',
        meta: {
            title: '新闻列表',
            keepAlive: false,
            cacheRouterPrev: ['Home'], // 新闻列表页返回首页时，销毁列表页
            cacheRouterNext: ['NewsDetail'], // 列表页进入新闻详情页时，详情页不缓存，每次重新初始化
        },
        component: () => import('@/pages/news/list.vue'),
    },
    {
        path: '/news/detail',
        name: 'NewsDetail',
        meta: {
            title: '新闻详情',
            keepAlive: false,
            cacheRouterPrev: ['NewsList'], // 新闻详情页返回列表页，直接显示缓存的列表页，需要配置
        },
        component: () => import('@/pages/news/detail.vue'),
    }
]

// 在`router/index.js`文件中（如果你使用了vue路由，自然就应该有这个文件），开发者自己创建的router实例

const router = createRouter({
    history: createWebHistory(xxxxxxxx), // 采用history模式
    routes, // 上面配置的路由
    linkActiveClass: 'is-active',
});

// 在`src/main.js`主入口文件中, 
import router from 'path to router(路由入口路径)';

//  `使用组件缓存需要做的第三步`：引入依赖包
import dynamicCacheRouter from 'vue-router-dynamic-cache';

// `使用组件缓存需要做的第四步`：调用依赖包`dynamicCacheRouter`对router实例进行增强，并将返回的新的cecheRouter实例
const { cecheRouter, store } = dynamicCacheRouter(router, store);

// `使用组件缓存需要做的第五步`：调用app.use()注册`cecheRouter`实例
const app = createApp(App);
app.use(cecheRouter)；
// app.use(store); // 如果开发者需要使用store，可以加上
app.mount('#app');

3. 具体使用

//  `使用组件缓存需要做的第六步`：在业务组件中使用

// 以上面的例子，从首页跳转到新闻详情
import { ROUTER_CACHE_CONSTANTS } from 'vue-router-dynamic-cache'; // 引入常量

const handleNavNewsList = () => {
    router.push({
        path: '/news/list',
        // hash值可自定义，开发者可以根据需求，继续拼接自定义参数
        hash: ROUTER_CACHE_CONSTANTS.KEY.ROUTER_ALIVE_HASH_PUSH, 
    });
};

// 从新闻列表页返回首页
const handleBack = () => {
    router.back();
}

// 从新闻列表页跳转到新闻详情
const handleNavDetail = (index) => {
    router.push({
        path: '/news/detail',
        query: newsList.value[index].id,
        // hash值是动态缓存的标识,开发者可以根据需求，继续拼接自定义参数
        hash: ROUTER_CACHE_CONSTANTS.KEY.ROUTER_ALIVE_HASH_PUSH,
    });
};

// 从新闻详情页返回新闻列表，当然了，使用系统自带的返回按钮也可以达到动态缓存的效果。
const handleNavBack = () => {
    router.back();
}

方法及参数说明

dynamicCacheRouter方法说明

/**
 * 处理路由缓存内容，在全局前置守卫`beforeEach`中添加处理函数
 * @param router createRouter创建的路由实例，必传
 * @param store createStore 创建的实例，非必传，请注意，当不传store时，方法会自行创建一个store实例并返回。
 * @returns Object { cacheRouter，store } 增强后的router及store。
 *  */ 
function dynamicCacheRouter(router, store) {
    // 增强处理 XXXX
    return {
        cacheRouter: router,
        store
    };
}

hash常量说明

const KEY = {
    ROUTER_ALIVE_HASH_PUSH, // 动态缓存功能标识，使用`router.push`时都需要加上该值
    ROUTER_ALIVE_HASH_BACK, // 使用`router.push`返回上一级时，础上拼接上该hash值，以便和router.back做区分
    ROUTER_ALIVE_HASH_RELOAD_BACK, // 通过router.push跳级返回，且需要重新加载返回页，则拼接上该值
    ROUTER_ALIVE_HASH_NO_CACHE_FROM, // 动态设置不缓存,如果router.push，hash上拼接上该值，则不缓存
    ROUTER_ALIVE_HASH_PUSH_REPLACE, // 当使用router.push({ replace: true})或者router.replace进行路由导航，在hash加拼接上该值。
}

技术背景

由于H5单页应用（SPA）渲染原理（以vue项目为例）：进入路由导航时，统一资源定位符（url）的更改触发路由对应的onHashChange/pushState/popState/replaceState方法，通过统一资源定位符（url）中的path路径去匹配路由配置文件中对应的路由组件，加载并实例化渲染在项目出口路由视图（router-view）中。一般而言，一个应用中路由视图的渲染出口只有一个，这就意味着一个路由组件实例的解析渲染则意味着另外一个路由组件实例的销毁，导致在应用访问期间，即便是我们已经访问过的渲染过的路由组件，在路由导航返回时，其对应路由组件也会重新加载，重新初始化，致使组件状态丢失，用户体验不佳，有时还会重复请求网络数据造成不必要的资源浪费。

而如果使用vue-router插件的keep-alive组件提供的路由组件缓存功能，由于vue-router本身没有提供对缓存组件的动态增加删除接口。一旦路由组件被缓存，那么在应用访问会话期间将一直留存在缓存栈中，当路由导航再次进入时，哪怕参数已经更改，vue-router插件也只会从已缓存的组件列表中获取组件并重新渲染，这种情况下路由组件就无法重新加载，状态无法更新，严重时将导致业务逻辑错误。另外，vue-router插件无法获取当前应用的路由导航访问历史栈，开发者也不能对当前应用路由访问缓存历史栈进行操作，然而在某些特殊的场景下，开发者需要动态更新已被缓存的组件。

基于vue框架的H5单页应用的视图渲染特性及vue-router的接口设计，想要应用能在不修改vue-router框架源代码，不侵入业务代码，不增加业务组件逻辑功能的情况下，实现H5单页应用中路由组件动态缓存功能，解决H5单页应用难以实现路由组件前进重新加载，后退不刷新且在应用单次访问会话期间保留历史路由组件数据及状态的问题，使应用的用户体验更加接近于App原生应用，并非一件易事。

发布主体

北银金融科技有限责任公司

许可证

MIT

维护者

z-yates