Route manager

Vue-route name of each hop is recorded, and some built-in rollback methods are used to facilitate the rollback to the specified page

background

In the projects developed by the author, various fancy jumps are often encountered. For example, there will be countless pages between the selection of the guide page and the final submission review, and even different operations in the middle will lead to different depths of the final rollback

Assume that the project starts at the selection page, eventually reaches the submission page and returns to the original page (the selection page)

Select page --> B --> C --> Submit page This time to return to A need to call the router. The go (3) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- selection page - > 1 B -- -- -- -- -- - > submit page 2 From choose to submit only experienced b-1, That's when go(-3) no longer applies, At this time may increase the query parameter channels (id) to distinguish between the second case -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- selection page -- -- - > B > C - 2 - > C - 2-1 - > submit page This kind of situation And will find that not only Go (-3) is not applicable, the query parameter has to add a type, if the subsequent need to distinguish more channels, imagine...Copy the code

The RouteManager plug-in can be used at this point to handle this complex set of issues

An introduction to

 npm i vue-route-manager -S
Copy the code

Import Vue from 'Vue' // Import the route manager import VueRouteManager from 'vue-route-manager' // and mount it to Vue Vue.use(VueRouteManager, { /* ... ManagerOptions */}) // This.$RouteManager can be used in the page to access the managerCopy the code

ManagerOptionsParameters that

The sample

The Home page

Route information {path: ‘/home’, name: ‘home’, Component: home}

</button> </template> <script> exprot default {methods: $routemanager.sethome ('home') this.$router.push({name: 'page-1'})}} </script>Copy the code

Page 1 Page

Route information {path: ‘/page_1’, name: ‘page-1’, Component: Page-1}

<template> <div class="page-1"> page-1 <button @click="$router.push({ name: 'page - 2}) "> page < / button > < button @ click =" $router. Replace ({name:' page 1 '}) "> redirect < / button > < / div > < / template >Copy the code

Page – 2 pages

Route information {path: ‘/page_2’, name: ‘page-2’, Component: Page-2}

<template> <div class="page-2"> page-2 <button @click="$router.push({ name: </button> </div> </template> <script> exprot default { Methods: {backToHome(){// Call backHome to return to the original home page.$routemanager.backHome ()}}} </script>Copy the code

Page – three pages

Route information {path: ‘/page_3’, name: ‘page-3’, Component: Page-3}

<template> <div class="page-3"> page-3 < button@click ="$backToHome"> </ button@click ="backToPage" page-1</button> </div> </template> exprot default { methods: $routemanager.backbyName ('page-1')} {backToPage(){// Call backByName to return to the specified page (must have experienced the page). BackToHome (){// call backHome to return to the home page of the original record this.$routemanager.backHome ()}}} </script>Copy the code

To solve the problem

A - > B > C -- -- - > D return - > A / / is A | -- -- -- -- -- -- -- - > B - 1 - back - > A > D / / 2 | -- -- - > B > C - 2 - > C - 2-1 - - - > D return - > A / / is threeCopy the code

First call this.$routemanager.sethome (‘ page-a ‘) or this.$routemanager.sethome ().

Then call this.$routemanager.backhome () when the B page needs to return

Methods

setHome([name])

• name

  • Type: String
  • nameIndicates the name in the route list{ path: '/page_3', name: 'page-3', component: Page-3 }
  • Default: indicates the name of the current route

Set the page route name to be returned

backHome()

Go back to the Home page and set the home using setHome

backByName(name)

• name

  • Type: String
  • nameIndicates the name in the route list{ path: '/page_3', name: 'page-3', component: Page-3 }

Go back to the page with the specified name