Vue路由回退的完美解決方案（vue-route-manager）

Posted on by

路由管理器

記錄每次跳轉的vue-route name, 內置瞭一些處理回退的方法, 方便回退到指定頁面

背景

筆者所開發的項目中經常遇到各種花式跳轉, 例如從引導頁的選擇操作到最後的提交審核中間會經過無數頁面, 甚至中間所做的操作不同也會導致最後回退深度不同

假設項目中 起始點都是選擇頁, 最終都會抵達提交頁 並且都會返回到最初的頁面(選擇頁)

 選擇頁 –> B –> C –> 提交頁
 情況一 從選擇到提交 中間經歷瞭 B、C, 這時候返回 A 需要調用router.go(-3)
 —————————————-
 ​
 選擇頁 –> B-1 ——> 提交頁
 情況二 從選擇到提交 隻經歷瞭 B-1 , 這時候 go(-3) 不再適用, 此時可能會增加查詢參數(渠道id)來區分第二種情況
 —————————————-
 ​
 選擇頁 –> B-2 –> C-2 –>C-2-1 –> 提交頁
 這種情況 又會發現不僅 go(-3) 不適用, 查詢參數還得多加一種類型, 如果後續還需要區分更多渠道, 可想而知啊…

此時可以使用RouteManager插件來處理這一系列復雜的問題

入門

 npm i vue-route-manager -S

 import Vue from 'vue'
 ​
 // 引入 路由管理器
 import VueRouteManager from 'vue-route-manager'
 ​
 // 並將其掛載到 Vue 上
 Vue.use(VueRouteManager, { /* ...ManagerOptions */ })
 ​
 // 此時在頁面中可以用 this.$RouteManager 來訪問管理器

ManagerOptions參數說明

參數名 類型 必須 描述
router VueRouter Y VueRouter對象
debug Boolean N 是否開啟調試

示例

Home 頁

路由信息 { path: ‘/home’, name: ‘home’, component: Home }

 <template>
     <button @click="jump">下一頁</button>
 </template>
 <script>
 exprot default {
    methods: {
       jump(){
          // 記錄首頁的 name
          this.$RouteManager.setHome('home')
          this.$router.push({ name: 'page-1' })
       }
    }
 }
 </script>

Page-1 頁

路由信息 { path: ‘/page_1’, name: ‘page-1’, component: Page-1 }

 <template>
     <div class="page-1">
         page-1
         <button @click="$router.push({ name: 'page-2' })">下一頁</button>
         <button @click="$router.replace({ name: 'page-1' })">重定向</button>
     </div>
 </template>

Page-2 頁

路由信息 { path: ‘/page_2’, name: ‘page-2’, component: Page-2 }

 <template>
     <div class="page-2">
         page-2
         <button @click="$router.push({ name: 'page-3' })">下一頁</button>
         <button @click="backToHome">返回首頁</button>
     </div>
 </template>
 <script>
 exprot default {
    methods: {
       backToHome(){
          // 調用 backHome 來返回到最開始記錄的 home 頁
          this.$RouteManager.backHome()
       }
    }
 }
 </script>

Page-3 頁

路由信息 { path: ‘/page_3’, name: ‘page-3’, component: Page-3 }

 <template>
   <div class="page-3">
     page-3
     <button @click="$backToHome">返回首頁</button>
     <button @click="backToPage">返回 page-1</button>
   </div>
 </template>
 exprot default {
    methods: {
       backToPage(){
          // 調用 backByName 來返回到指定頁(必須經歷過此頁面)
          this.$RouteManager.backByName('page-1')
       },
         backToHome(){
          // 調用 backHome 來返回到最開始記錄的 home 頁
          this.$RouteManager.backHome()
       }
    }
 }
 </script>

解決問題

 A –> B –> C –> D –返回-> A // 情況一
  |–> B-1 ——> D –返回-> A // 情況二
  |–> B-2 –> C-2 –>C-2-1 –> D –返回-> A // 情況三

首先在A頁面調用this.$RouteManager.setHome(‘page-A’)或者this.$RouteManager.setHome()

接著B頁面需要返回的時候調用this.$RouteManager.backHome()即可

Methods

setHome([name])

  • name
    • Type: String
    • name所指路由列表當中的 name { path: ‘/page_3’, name: ‘page-3’, component: Page-3 }
    • Default: 當前路由的name

設置需要最終返回的頁面路由name

backHome()

回退到home頁, 通過setHome來設置home

backByName(name)

  • name
    • Type: String
    • name所指路由列表當中的 name { path: ‘/page_3’, name: ‘page-3’, component: Page-3 }

回退到指定name的頁面

總結

到此這篇關於Vue路由回退的完美解決方案vue-route-manager的文章就介紹到這瞭,更多相關Vue路由回退內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：