Vue 全站缓存之 vue-router-then：给 SPA 加速

前言

在之前的文章 Vue 全站缓存之 keep-alive ： 动态移除缓存 和 Vue 全站缓存二：如何设计全站缓存 中，我们实现了 Vue.js 中的全站缓存功能，在页面之间后退或同层页面之间跳转时可以复用缓存，减少了请求频率，提升了用户体验。理论上，开发逻辑也因此变得简单直观。

现在，为了优化 SPA 单页应用，我们介绍一种新的 Vue.js 库——vue-router-then。该库旨在简化前后页数据传递的过程。我们使用它可以跨组件共享数据，从而避免重新获取数据和重新渲染组件。最终结果是更快的页面加载速度和更好的用户体验。

安装

首先，在您的 Vue.js 项目中安装 vue-router-then：

npm install vue-router-then --save

然后，在您的 Vue.js 项目的 main.js 文件中，注册 vue-router-then 插件：

import Vue from 'vue'
import VueRouterThen from 'vue-router-then'

Vue.use(VueRouterThen)

使用

vue-router-then 的使用非常简单。您只需在需要传递数据的组件中使用 $routerThen 方法即可。例如，在父组件中传递数据：

// 父组件
export default {
  methods: {
    passDataToChild() {
      this.$routerThen((to, from, next) => {
        next({
          data: {
            message: 'Hello from parent!'
          }
        })
      })
    }
  }
}

然后，在子组件中接收数据：

// 子组件
export default {
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.data = to.params.data
    })
  }
}

结语

vue-router-then 是一个非常有用的库，可以简化 Vue.js 应用中的前后页数据传递。通过使用它，我们可以跨组件共享数据，从而避免重新获取数据和重新渲染组件，最终提升 SPA 应用的性能和用户体验。