Shulou(Shulou.com)06/03 Report--

This article focuses on "what is the Vue page stack manager", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the Vue page stack manager"!

Catalogue

2. Tried methods

2.1 keep-alive

2.2 CSS with nested route

3. Function description

4. Installation and usage

5 、 API

5.1 Registration

5.2 forward and backward

6. Related instructions

6.1 keyName

6.2 principle

A vue page stack manager Vue Page Stack Manager vue-page-stack

The example shows the general forward, backward (with activited) and replace scenarios, as well as the effect that multiple layers can exist on the same route (enter the necessary information)

At present, the version has not been tested by the overall business. Those with the same requirements are welcome to try it out.

Preview

1. Demand analysis

Due to the heavy use of Vue family buckets in web App, official account and native Hybrid development, it is natural to encounter page jump and fallback problems.

An example of a scenario:

The list page goes to the details page, and then rollback

An action page A needs to be selected on the next page B, and after selection, it needs to be returned to page A (page An also needs to know what is selected)

Go to the login page on any page, return to the original page after login or registration, and make sure that you will not go to the login page if you continue to roll back.

Back and forward that support browsers (Wechat or Mini Program are useful)

Add some animation when entering, exiting, or some special pages, such as imitating the default animation of ios (enter when the page is translated from right to left, exit is when the page is translated from left to right)

2. Tried methods

I tried the following methods, but none of them met my expectations.

2.1 keep-alive

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

Keep-alive will only store the same page once, and there will not be two versions of the same page.

There is no way to use animation such as transition between two router-view

2.2 CSS with nested route

When I looked at the example of cube-ui, I found that their example seemed to solve the problem of page caching. I borrowed from (copy) their approach, upgraded it, and implemented the basic requirements using CSS and nested route.

But there are also drawbacks:

I have to write my route strictly according to the level of the page.

Many pages need to be used in multiple places, and I have to route them all (for example, the product details page, there will be entrances in many places)

3. Function description

Expand on vue-router, the original navigation logic does not need to change

Re-render the page when push or forward, and the newly rendered page will be added to the Stack

Back or go (negative number) will not re-render, read the previous page from Stack, will retain the previous content status, such as form content, scroll bar sliding position, etc.

Unused pages are removed from Stack when back or go (negative number)

Replace updates the page information in Stack

The activited hook function triggers when you fall back to the previous page

Support browser backwards and forward events

Support to respond to changes in routing parameters, such as navigating from / user/foo to / user/bar, and component instances will be reused

You can add different animations as you move forward and backward, or you can add special animations to special pages.

4. Installation and usage

Installation:

Npm install vue-page-stack# ORyarn add vue-page-stack

Use:

Import Vue from 'vue'import VuePageStack from' vue-page-stack';// vue-router is a required Vue.use (VuePageStack, {router}); / / App.vue export default {name: 'App', data () {return {};}, components: {}, created () {}, methods: {}}; 5. API5.1 registration

You can specify the name and keyName of VuePageStack when you register. Generally, you don't need it.

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

If you want to add some animation to forward, backward or special routes, you can use watch $route on the router-view page, and judge the direction by the parameters stack-key-dir (custom keyName also changes here). You can refer to an example.

6. Related instructions 6.1 keyName

Why the parameter keyName is added to the route is to support the backward and forward events of the browser, which is very important in the official account of Wechat and Mini Program.

6.2 principle

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

This plug-in has been in my heart for a long time. I've been doing it off and on for a long time, and I'm really happy to get it done.

The current version has not been tested by the overall business, welcome those with the same needs to try out, if you have any comments or suggestions, welcome to mention issue and PR in Github, thank you for your support and contribution.

This plug-in draws on both vue-navigation and vue-nav, and thanks a lot for their inspiration.

At this point, I believe you have a deeper understanding of "what is the Vue page stack manager". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.