[Vue-page-stack] Vue single page application navigation manager officially released

[Vue-page-stack] Vue single page application navigation manager officially released

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

[20190828 Update] Adapt vue-router 3.1.x

In the middle, I was delayed for a month because of complicated online chat. Sorry. Let me talk about the results first. At present, they have been verified in multiple environments, including ios, Android, WeChat official accounts, and WeChat applets (yes, applets can also engage in pure H5 projects). They are all relatively complex businesses. The pure H5 single-page project under webview can perfectly solve our business needs.

The 1.0.0 version was pushed on npm, and our internal projects have begun to be officially used. Welcome to use, welcome to Star, hope to help you.

project address

Friends who don t know what problems have been solved can look at the previous situation summary

performance

Let me talk about the performance problem that everyone is most concerned about. It is much better than the Vuebuilt-in keep-alivecomponents, because all the caches before the components will not be destroyed keep-aliveafter caching once , but they are cached and destroyed according to the UI hierarchy. The following use shows the difference between the twokeep-alivedestroyedvue-page-stackvue-devtool

Through the above figure, we can clearly see the status of the activated component and the cached component, vue-page-stackstore the UI on the stack, and activate it when it is rolled back, and clear the unused component cache; andkeep-alive all components you have activated Cache down

principle

As I said last time, it is keep-alivethe code for reference. Some codes are pasted below for reference.

render() {
  let key = this.$route.query[keyName];
  const slot = this.$slots.default;
 // vnode
  const vnode = getFirstComponentChild(slot);
  if (!vnode) {
    return vnode;
  }
 // 
  let index = getIndexByKey(key);
  if (index !== -1) {
   // vnode
    vnode.componentInstance = stack[index].vnode.componentInstance;
   //destroy the instances that will be spliced
    for (let i = index + 1; i < stack.length; i++) {
      stack[i].vnode.componentInstance.$destroy();
      stack[i] = null;
    }
    stack.splice(index + 1);
  } else {
   // replace 
    if (history.action === config.replaceName) {
     //destroy the instance
      stack[stack.length - 1].vnode.componentInstance.$destroy();
      stack[stack.length - 1] = null;
      stack.splice(stack.length - 1);
    }
   // push
    stack.push({ key, vnode });
  }
  vnode.data.keepAlive = true;
  return vnode;
}
 

Vue single page application navigation manager


Features

  • Extend on vue-router, the original navigation logic remains unchanged
  • pushor forwardthe time to re-render the page, Stack will add a new rendering of the page
  • It will not be re-rendered when it is backor go( ). Reading the previous page from the Stack will retain the previous content state, such as the content of the form, the sliding position of the scroll bar, etc.
  • backor go( )when the page will not be removed from the Stack
  • replacewill update the current page in Stack
  • The activated hook function is triggered when returning to the previous page
  • Support browser back and forward events
  • Support to respond to changes in routing parameters, such as navigating from/user/foo to/user/bar, component instances will be reused
  • Provide routing direction changes, you can add different animations when going forward and backward

Installation and usage

installation

npm install vue-page-stack
# OR
yarn add vue-page-stack
 

use

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

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

CDN

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

API

Register the plugin

You can specify the name and keyName of VuePageStack when registering

You need to register the plug-in before use Vue.useto installvue-page-stack

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

Options description:

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 the name and keyName of VuePageStack when registering

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

Forward and backward

If you want to add some animation when the page is moving forward or backward, you can stack-key-dirjudge by

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

example

Related description

keyName

Why add keyNamethis parameter to the route is to support the browser's back and forward events. This feature is very important in webApp, WeChat official accounts and small programs. No alternative has been found so far, if you have ideas, please discuss it.

principle

Get the current page instance part of the reference Vuesource code keep-alivesection

thank

This plugin draws on both vue-navigation and vue-nav at the same time , I am very grateful for their inspiration.