Skip to content

Latest commit

 

History

History
127 lines (101 loc) · 3.67 KB

README-EN.md

File metadata and controls

127 lines (101 loc) · 3.67 KB

feb-alive

中文说明

Vue Page level caching solution

Demo: View example

image

Install

NPM

npm i feb-alive -S

Direct Download / CDN

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

On the browser side, you can use the variable window.$febAlive to access the package object

Usage example

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

// Rewrite history before router instantiation
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 Support routing nesting, same as keep-alive
<template>
  <x-header />
  <feb-alive>
    <router-view></router-view>
  </feb-alive>
</template>

Vue.use(febAlive, options)

options

属性 类型 介绍
router VueRouter Route instance
keyName string Primary key used to cache pages，default: 'key'
isServer boolean Whether it is server-side rendering mode，default: false
maxPage number Maximum number of cached pages with feb-alive，default: 10
beforeLocationChange function Intercept function before page jump

beforeLocationChange(route, cb)

  • route The route matched after executing $loaction.to or $loaction.replace
  • cb(true) Execute VueRouter single page jump, call router.push and router.repalce respectively
  • cb(false) Perform location jump, call location.href and location.replace respectively

Route meta configuration

  • disableCache: boolean Whether to turn off feb-alive cache，default: false
{
  meta: {
    disableCache: false
  }
}

Static method

resetHistory

  • Initialize the Histroy API, because vue-router will rewrite history.state, it must be called before VueRouter is instantiated
febAlive.resetHistory()

Vue instance prototype method

$location

  • When the plugin is installed, the $location object will be mounted on the Vue prototype, and all the Vue component instance can be accessed through this.$location

$location.to(location, [ native])

  • location: string | object The url that needs to be redirected can be an absolute path or a relative path. If native is false and the url is a relative path, the single-page route will be matched first, and location.replace will be used if it is not matched.

  • native: boolean Whether to force the use of native location.href jump, 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 The url that needs to be redirected can be an absolute path or a relative path. If native is false and the url is a relative path, the single-page route will be matched first, and location.replace will be used if it is not matched.

  • native: boolean Whether to force the use of native location.href jump, default: false

$location.go(n)

  • same as router.go(n)

$location.back()

  • same as router.back()

$location.forward()

  • same as router.forward()

Licence

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