The perfect solution for Vue routing fallback (vue-route-manager)

Routing Manager

Record the vue-route name of each jump, and have built-in methods for handling fallbacks, making it easy to fall back to the specified page

background

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

Assume that the starting point of the project is the selection page, and eventually it will reach the submission page and return to the original page (selection page)

Select Page --> B --> C --> Submit Page
Case 1: From selection to submission, we go through B and C. At this time, we need to call router.go(-3) to return to A.
----------------------------------------
​
Select Page --> B-1 ------> Submit Page
In case 2, only B-1 is experienced from selection to submission. At this time, go(-3) is no longer applicable. At this time, a query parameter (channel id) may be added to distinguish the second case.
----------------------------------------
​
Select Page --> B-2 --> C-2 --> C-2-1 --> Submit Page
In this case, not only is go(-3) not applicable, but the query parameter must have an additional type. If more channels need to be distinguished later, you can imagine...

At this time, you can use the RouteManager plug-in to handle this series of complex problems

getting Started

 npm i vue-route-manager -S

 import Vue from 'vue'
 ​
 // Import the route manager import VueRouteManager from 'vue-route-manager'
 ​
 // and mount it on Vue Vue.use(VueRouteManager, { /* ...ManagerOptions */ })
 ​
 // At this point in the page you can use this.$RouteManager to access the manager

ManagerOptions Parameters

Example

Home Page

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

 <template>
  <button @click="jump">Next page</button>
 </template>
 <script>
 export default {
    methods: {
       jump(){
          //Record the name of the home page
          this.$RouteManager.setHome('home')
          this.$router.push({ name: 'page-1' })
      }
    }
 }
 </script>

Page-1 Page

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

 <template>
  <div class="page-1">
  page-1
  <button @click="$router.push({ name: 'page-2' })">Next page</button>
  <button @click="$router.replace({ name: 'page-1' })">Redirect</button>
  </div>
 </template>

Page-2

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

 <template>
  <div class="page-2">
  page-2
  <button @click="$router.push({ name: 'page-3' })">Next page</button>
  <button @click="backToHome">Back to Home</button>
  </div>
 </template>
 <script>
 export default {
    methods: {
       backToHome(){
          // Call backHome to return to the home page of the first record this.$RouteManager.backHome()
      }
    }
 }
 </script>

Page-3 pages

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

 <template>
   <div class="page-3">
    page-3
     <button @click="$backToHome">Back to Home</button>
     <button @click="backToPage">Back to page-1</button>
   </div>
 </template>
 export default {
    methods: {
      backToPage(){
          // Call backByName to return to the specified page (must have gone through this page)
          this.$RouteManager.backByName('page-1')
      },
  backToHome(){
          // Call backHome to return to the home page of the first record this.$RouteManager.backHome()
      }
    }
 }
 </script>

Solving the problem

A --> B --> C --> D -- Return -> A // Case 1
|--> B-1 ------> D --Return-> A // Case 2
|--> B-2 --> C-2 -->C-2-1 --> D --Return-> A // Case 3

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

Then when page B needs to return, call this.$RouteManager.backHome()

Methods

setHome([name])

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

Set the page route name that needs to be returned eventually

backHome()

Return to the home page and set the home page via setHome

backByName(name)

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

Return to the page with the specified name

Summarize

This concludes this article about vue-route-manager, the perfect solution for Vue routing fallback. For more relevant Vue routing fallback content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!