快捷導(dǎo)航

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

更新時(shí)間：2021年09月07日 14:58:29 作者：晝貓

最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下

路由管理器

記錄每次跳轉(zhuǎn)的vue-route name, 內(nèi)置了一些處理回退的方法, 方便回退到指定頁(yè)面

背景

筆者所開(kāi)發(fā)的項(xiàng)目中經(jīng)常遇到各種花式跳轉(zhuǎn), 例如從引導(dǎo)頁(yè)的選擇操作到最后的提交審核中間會(huì)經(jīng)過(guò)無(wú)數(shù)頁(yè)面, 甚至中間所做的操作不同也會(huì)導(dǎo)致最后回退深度不同

假設(shè)項(xiàng)目中起始點(diǎn)都是選擇頁(yè), 最終都會(huì)抵達(dá)提交頁(yè) 并且都會(huì)返回到最初的頁(yè)面(選擇頁(yè))

選擇頁(yè) --> B --> C --> 提交頁(yè)
情況一從選擇到提交中間經(jīng)歷了 B、C, 這時(shí)候返回 A 需要調(diào)用router.go(-3)
----------------------------------------

選擇頁(yè) --> B-1 ------> 提交頁(yè)
情況二從選擇到提交只經(jīng)歷了 B-1 , 這時(shí)候 go(-3) 不再適用, 此時(shí)可能會(huì)增加查詢參數(shù)(渠道id)來(lái)區(qū)分第二種情況
----------------------------------------

選擇頁(yè) --> B-2 --> C-2 -->C-2-1 --> 提交頁(yè)
這種情況又會(huì)發(fā)現(xiàn)不僅 go(-3) 不適用, 查詢參數(shù)還得多加一種類型, 如果后續(xù)還需要區(qū)分更多渠道, 可想而知啊...

此時(shí)可以使用RouteManager插件來(lái)處理這一系列復(fù)雜的問(wèn)題

入門(mén)

 npm i vue-route-manager -S

 import Vue from 'vue'
 
 // 引入 路由管理器
 import VueRouteManager from 'vue-route-manager'
 
 // 并將其掛載到 Vue 上
 Vue.use(VueRouteManager, { /* ...ManagerOptions */ })
 
 // 此時(shí)在頁(yè)面中可以用 this.$RouteManager 來(lái)訪問(wèn)管理器

ManagerOptions參數(shù)說(shuō)明

參數(shù)名	類型	必須	描述
router	VueRouter	Y	VueRouter對(duì)象
debug	Boolean	N	是否開(kāi)啟調(diào)試

示例

Home 頁(yè)

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

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

Page-1 頁(yè)

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

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

Page-2 頁(yè)

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

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

Page-3 頁(yè)

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

 <template>
   <div class="page-3">
     page-3
     <button @click="$backToHome">返回首頁(yè)</button>
     <button @click="backToPage">返回 page-1</button>
   </div>
 </template>
 exprot default {
    methods: {
       backToPage(){
          // 調(diào)用 backByName 來(lái)返回到指定頁(yè)(必須經(jīng)歷過(guò)此頁(yè)面)
          this.$RouteManager.backByName('page-1')
       },
         backToHome(){
          // 調(diào)用 backHome 來(lái)返回到最開(kāi)始記錄的 home 頁(yè)
          this.$RouteManager.backHome()
       }
    }
 }
 </script>