feb-alive 页面级缓存解决方案

English Document

社区文章

Vue页面级缓存解决方案feb-alive (上)

Vue页面级缓存解决方案feb-alive (下)

demo: 查看示例

安装

NPM

npm i feb-alive -S

Direct Download / CDN

<script src="./dist/feb-alive.browser.js"></script>

浏览器端可以使用变量window.$febAlive访问包对象

使用示例

import febAlive from 'feb-alive'
import Router from 'vue-router'

// 在router实例化之前重写history
febAlive.resetHistory()

const router = new Router(options)

Vue.use(febAlive, { router })

// App.vue
<template>
  <div id="app">
    <feb-alive>
      <router-view></router-view>
    </feb-alive>
  </div>
</template>

// Home.vue 支持路由嵌套, 同keep-alive
<template>
  <x-header />
  <feb-alive>
    <router-view></router-view>
  </feb-alive>
</template>

Vue.use(febAlive, options)

options

属性	类型	介绍
router	VueRouter	路由实例
keyName	string	用于缓存页面的主键，default: 'key'
isServer	boolean	是否是服务端渲染模式，default: false
maxPage	number	每个feb-alive的缓存最大页数，default: 10
beforeLocationChange	function	页面跳转前拦截函数

beforeLocationChange(route, cb)

• route 调用$loaction.to或者$loaction.replace后所匹配到的路由组件
• cb(true) 进行VueRouter单页跳转，分别调用router.push和router.repalce
• cb(false) 进行location跳转，分别调用location.href和location.replace

路由meta配置

• disableCache: boolean 是否关闭feb-alive缓存，default: false

{
  meta: {
    disableCache: false
  }
}

静态方法

resetHistory

• 初始化 Histroy API，由于vue-router会重写history.state，所以必须在VueRouter实例化之前调用

febAlive.resetHistory()

Vue原型方法

$location

• 插件在install时，会在Vue的原型上挂载$location对象，所有vue组件实例中都可以通过this.$location访问到

$location.to(location, [ native])

• location: string | object 需要跳转的url，可以是绝对路径也可以是相对路径，如果native是false且url是相对路径则优先匹配单页路由，若未匹配到则进行location.href跳转
• native: boolean 是否强制使用原生location.href跳转, default: false

vm.$location.to('https://www.google.com',true)
vm.$location.to('/home')
vm.$location.to({
  path: '/home',
  query: {
    tag: 'wedoctor'
  }
})

$location.replace(url, [ native])

• url: string 需要跳转的url，可以是绝对路径也可以是相对路径，如果native是false且url是相对路径则优先匹配单页路由，若未匹配到则进行location.replace跳转
• native: boolean 是否强制使用原生location.replace跳转, default: false

$location.go(n)

• 同router.go(n)

$location.back()

• 同router.back()

$location.forward()

• 同router.forward()

Licence

feb-alive is licensed under the MIT License - see the LICENSE file for details.