目錄

• 路由管理器
  
• 背景
  
• 入門
  
• 解決問題
  
• Methods
  
• 總結

路由管理器

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

背景

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

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

選擇頁 --> B --> C --> 提交頁
情況一 從選擇到提交 中間經歷了 B、C,這時候返回 A 需要呼叫router.go(-3)
----------------------------------------

​
選擇頁 --> B-1 ------> 提交頁
情況二 從選擇到提交 只經歷了 B-1,這時候 go(-3) 不再適用,此時可能會增加查詢引數(渠道id)來區分第二種情況
----------------------------------------
​
選擇頁 --> B-2 --> C-2 -->C-2-1 vWJxlAjVt--> 提交頁
這種情況 又會發現不僅 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引數說明

www.cppcns.com

引數名	型別	必須	描述
router	VueRouter	Y	VueRouter物件
debug	Boolean	N	是否開啟除錯

示例

Home 頁

路由資訊 { path: '/home',name: 'home',component: Home }

<template>
    <button @click="jump">下一頁</button>
http://www.cppcns.com</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.$RouteManagvWJxlAjVter.backHome()
    }
  }
}
</script>

Page-3 頁

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

<template>
 <div class="page-3">
   page-3
  <button @click="$backToHome">返回首頁</button>http://www.cppcns.com
  <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',component: Page-3 }
  • Default: 當前路由的name

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

backHome()

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

backByName(name)

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

回退到指定name的頁面

總結

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