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

This article will explain in detail the example analysis of routing fallback in Vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Route Manager

Record the vue-route name of each jump, with some built-in methods to handle fallback to facilitate fallback to the specified page

Background

Various fancy jumps are often encountered in the projects developed by the author, for example, countless pages will be passed between the selection operation of the guide page and the final submission review, and even the different actions done in the middle will lead to different depths of the final fallback.

Assuming that all the starting points in the project are selection pages, they will eventually reach the submission page and return to the original page (selection page).

Select Page-- > B-- > C-- > submit Page

In case one, you go through B and C from selection to submission, and you need to call router.go (- 3) to return A.

-

Select Page-- > BMIT 1-> submit Page

In case 2, only Bmurl has been experienced from selection to submission, when go (- 3) is no longer applicable, and query parameters (channel id) may be added to distinguish the second case.

-

Select Page-- > Bmur2-- > Cmur2-- > Cmur2-- 1-- > submit Page

In this case, we will find that not only go (- 3) is not applicable, but we also have to add one more type of query parameters. If we need to distinguish more channels later, we can imagine.

At this point, you can use the RouteManager plug-in to deal with this series of complex problems.

Introduction

Npm I vue-route-manager-S import Vue from 'vue' / / introduces the route manager import VueRouteManager from' vue-route-manager' / / and mounts it to the Vue Vue.use (VueRouteManager, {/ *... ManagerOptions * /}) / / at this point in the page you can use this.$RouteManager to access the manager

ManagerOptions parameter description

The parameter name type must describe whether routerVueRouterYVueRouter object debugBooleanN is enabled for debugging

Example

Home page

Routing information {path:'/ home', name: 'home', component: Home}

Next page exprot default {methods: {jump () {/ / record the name this.$RouteManager.setHome ('home') this.$router.push ({name:' page-1'})} of the home page

Page-1 page

Routing information {path:'/ page_1', name: 'page-1', component: Page-1}

Page-1 next page redirect

Page-2 page

Routing information {path:'/ page_2', name: 'page-2', component: Page-2}

The next page of page-2 returns the home page exprot default {methods: {backToHome () {/ / call backHome to return to the home page this.$RouteManager.backHome ()}} that was originally recorded.

Page-3 page

Routing information {path:'/ page_3', name: 'page-3', component: Page-3}

Page-3 returns home page return page-1 exprot default {methods: {backToPage () {/ / call backByName to return to the specified page (you must have experienced this page) this.$RouteManager.backByName ('page-1')} BackToHome () {/ / call backHome to return to the original recorded home page this.$RouteManager.backHome ()} to resolve the problem

A-- > B-- > C-- > D-- return-> A / / case one

| |-- > Bmer1-> D-- return-> A / / case 2 |

| |-- > Bmur2-- > Cmur2-- > Cmur2-- > D-- return-> A / / case 3 |

First call this.$RouteManager.setHome ('page-A') or this.$RouteManager.setHome () on the A page

Then call this.$RouteManager.backHome () when the B page needs to be returned.

Methods

SetHome ([name])

Name

Type: String

Name {path:'/ page_3', name: 'page-3', component: Page-3} in the route list referred to by name

Default: the name of the current route

Set the name of the page route that needs to be returned finally

BackHome ()

Go back to the home page and set up home through setHome

BackByName (name)

Name

Type: String

Name {path:'/ page_3', name: 'page-3', component: Page-3} in the route list referred to by name

Fall back to the page of the specified name

This is the end of the article on "example Analysis of Route fallback in Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.