Vue Page Stack Manager Details

A vue page stack manager Vue vue-page-stack

The example shows the general forward, backward (activated) and replace scenarios, and also shows that the same route can have multiple layers (enter the necessary information)

The current version has not been tested for the overall business, and those with the same needs are welcome to try it out.

Preview

1. Demand Analysis

Since Vue is heavily used in web App , official accounts, and native Hybrid development, it is natural to encounter problems with page jumps and rollbacks.

Example scenario:

• Enter the details page from the list page and then back
• A certain operation page A needs to be selected on the next page B, and after the selection, it needs to return to page A (page A also needs to know what was selected)
• Enter the login page from any page, return to the original page after successful login or registration, and make sure that you will not return to the login page if you continue to return.
• Support browser back and forward (very useful for WeChat or mini-programs)
• Add some animations when entering, exiting or certain special pages, such as imitating the default animation of ios (entering is the page panning from right to left, exiting is the page panning from left to right)

2. Tried methods

I tried the following methods, but none of them worked as I expected:

2.1 keep-alive

Generally, two router-view are used to control whether the page is cached through route information and keep-alive . This has two problems:

• keep-alive will only store the same page once, so there will not be two versions of the same page
• There is no way to use transition and other animations between two router-view

2.2 CSS with nested routes

When I was looking at the examples of cube-ui , I found that their examples seemed to solve the problem of page caching. I borrowed ( copy ) their processing method, upgraded it, and used CSS and nested route to achieve basic requirements.

But there are also disadvantages:

• I must write my route strictly according to the page hierarchy
• Many pages need to be used in multiple places, and I have to configure the routes for them (for example, the product details page will have entrances in many places)

3. Functional description

• Expand on vue-router, the original navigation logic does not need to be changed
• When push or forward , the page is re-rendered, and the newly rendered page is added to Stack
• When back or go (negative number) is pressed, the page will not be re-rendered. The previous page will be read from the Stack, and the previous content state will be preserved, such as form content, scroll bar position, etc.
• When back or go (negative number), unused pages will be removed from the Stack.
• replace will update the page information in Stack
• When returning to the previous page, the activited hook function is triggered
• Support browser back and forward events
• Supports responding to changes in routing parameters, such as navigating from /user/foo to /user/bar , component instances will be reused
• You can add different animations when moving forward and backward, or add special animations on special pages.

4. Installation and Usage

Install:

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 required Vue.use(VuePageStack, { router }); 
// App.vue
<template>
  <div id="app">
    <vue-page-stack>
      <router-view ></router-view>
    </vue-page-stack>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    };
  },
  components: {},
  created() {},
  methods: {}
};
</script>

5. API

5.1 Registration

When registering, you can specify the name and keyName of VuePageStack , which is generally not required.

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

5.2 Forward and Backward

If you want to add some animations when going forward, backward or on a special route, you can use watch $route on router-view page and use stack-key-dir (custom keyName also changes here) parameter to determine the direction at this time. You can refer to the example

6. Related instructions

6.1 keyName

Why is the keyName parameter added to the route? It is to support the browser's back and forward events. This feature is very important in WeChat public accounts and mini programs.

6.2 Principle

The Stack section of getting the current page refers to keep-alive section.

This plugin has been in my mind for a long time. I worked on it on and off for a long time, and finally I got it done. I am really happy.

The current version has not been tested for the overall business. Welcome to try it out if you have the same needs. If you have any comments or suggestions, please raise issue and PRs on Github . Thank you for your support and contribution.

This plugin draws on both vue-navigation and vue-nav. I am very grateful for their inspiration.

This is the end of this article about the details of Vue Page Stack Manager. For more relevant Vue Page Stack Manager content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!