[20191031 Update] Solve the problem of page A-> page A

[20190828 Update] Adapted to Vue-Router 3.1.x

In the middle of the complicated online chat, delayed a month, sorry. First of all, the results have been verified in multiple environments, including ios, Android, wechat public account and wechat mini program (yes, mini program can also conduct pure H5 project). They are all complex businesses, pure H5 single-page projects under WebView, which can perfectly solve our business needs.

Version 1.0.0 has been pushed on NPM and has been officially used in our internal project. Welcome to Star. I hope I can help you.

The project address

Previously on what was solved for those of you who don’t know

performance

They will not destroy all caches before the keep-alive component destroyed the cache once. But vue-Page-stack is cached and destroyed according to the UI hierarchy. The following uses vue-devtool to show the difference

vue-page-stack
keep-alive

The principle of

As mentioned last time, it is the code of keep-alive for reference. Here are some codes for reference

render() {
  let key = this.$route.query[keyName];
  const slot = this.$slots.default; Const vNode = getFirstComponentChild(slot);if(! vnode) {returnvnode; } // Check whether the current page is cachedlet index = getIndexByKey(key);
  if(index ! PonentInstance = stack[index]. PonentInstance = stack[index]. // destroy the instances that will be splicedfor (let i = index + 1; i < stack.length; i++) {
      stack[i].vnode.componentInstance.$destroy(a); stack[i] = null; } stack.splice(index + 1); }else{// No cache is the new page, need to store or replace the current pageif (history.action === config.replaceName) {
      // destroy the instance
      stack[stack.length - 1].vnode.componentInstance.$destroy(a); stack[stack.length - 1] = null; stack.splice(stack.length - 1); } // push stack. Push ({key, vnode}); } vnode.data.keepAlive =true;
  return vnode;
}
Copy the code

Vue single page application navigation manager

features

  • 🐉 is extended on vue-router and the original navigation logic remains unchanged
  • ⚽pushorforwardThe Stack will add the newly rendered page
  • 🏆backorThe go (negative)The previous page is read from the Stack, and the previous content state is preserved, such as the form content, scroll bar slide position, etc
  • 🏈backorThe go (negative)“Will remove unused pages from the Stack
  • 🎓replaceUpdates the current page in the Stack
  • 🎉 will trigger activited hook function when backing back to previous page
  • 🚀 supports browser back, forward events
  • 🍕 allows component instances to be reused in response to changes in routing parameters, such as navigating from /user/foo to /user/bar
  • 🐰 provides route direction changes and can add different animations when moving forward and backward

Installation and Usage

The installation

npm install vue-page-stack
# OR
yarn add vue-page-stack
Copy the code

use

import Vue from 'vue'
import VuePageStack from 'vue-page-stack';

// vue-router is necessary
Vue.use(VuePageStack, { router }); 
Copy the code
// App.vue
<template>
  <div id="app">
    <vue-page-stack>
      <router-view ></router-view>
    </vue-page-stack>
  </div>
</template>
Copy the code

CDN

<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
Copy the code
Vue.use(VuePageStack.default, { router });
Copy the code

API

To register the plugin

You can specify a VuePageStack name and keyName during registration

Use vue. use to install vue-page-stack You need to register the plug-in before using it

Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });
Copy the code

The Options:

Attribute Description Type Accepted Values Default
router vue-router instance Object vue-router instance –
name VuePageStack name String ‘VuePageStack’ ‘VuePageStack’
keyName stack-key name String ‘stack-key’ ‘stack-key’

You can specify a VuePageStack name and keyName during registration

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
Copy the code

Forward and backward

If you want to add some animation as the page moves forward or backward, use stack-key-dir to determine

// App.vue
$route(to, from) {
  if (to.params['stack-key-dir'= = ='forward') {
    this.transitionName = 'forward';
  } else {
    this.transitionName = 'back'; }}Copy the code

example

Related instructions

keyName

The reason why keyName is added to route is to support browser back and forward events. This feature is very important in webApp, wechat official account and mini program. No alternative has been found at present. Welcome to discuss if you have ideas.

The principle of

The section that gets the current page instance refers to the keep-alive section of the Vue source code

Thank you

This plugin borrows from both Vue-Navigation and Vue-nav, thanks for the inspiration.