您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue中路由回退的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
記錄每次跳轉(zhuǎn)的vue-route name, 內(nèi)置了一些處理回退的方法, 方便回退到指定頁面
筆者所開發(fā)的項(xiàng)目中經(jīng)常遇到各種花式跳轉(zhuǎn), 例如從引導(dǎo)頁的選擇操作到最后的提交審核中間會經(jīng)過無數(shù)頁面, 甚至中間所做的操作不同也會導(dǎo)致最后回退深度不同
假設(shè)項(xiàng)目中 起始點(diǎn)都是選擇頁, 最終都會抵達(dá)提交頁 并且都會返回到最初的頁面(選擇頁)
選擇頁 --> B --> C --> 提交頁
情況一 從選擇到提交 中間經(jīng)歷了 B、C, 這時(shí)候返回 A 需要調(diào)用router.go(-3)
----------------------------------------
選擇頁 --> B-1 ------> 提交頁
情況二 從選擇到提交 只經(jīng)歷了 B-1 , 這時(shí)候 go(-3) 不再適用, 此時(shí)可能會增加查詢參數(shù)(渠道id)來區(qū)分第二種情況
----------------------------------------
選擇頁 --> B-2 --> C-2 -->C-2-1 --> 提交頁
這種情況 又會發(fā)現(xiàn)不僅 go(-3) 不適用, 查詢參數(shù)還得多加一種類型, 如果后續(xù)還需要區(qū)分更多渠道, 可想而知啊...
此時(shí)可以使用RouteManager插件來處理這一系列復(fù)雜的問題
npm i vue-route-manager -S
import Vue from 'vue' // 引入 路由管理器 import VueRouteManager from 'vue-route-manager' // 并將其掛載到 Vue 上 Vue.use(VueRouteManager, { /* ...ManagerOptions */ }) // 此時(shí)在頁面中可以用 this.$RouteManager 來訪問管理器
ManagerOptions參數(shù)說明
參數(shù)名 | 類型 | 必須 | 描述 |
---|---|---|---|
router | VueRouter | Y | VueRouter對象 |
debug | Boolean | N | 是否開啟調(diào)試 |
示例
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(){ // 調(diào)用 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(){ // 調(diào)用 backByName 來返回到指定頁(必須經(jīng)歷過此頁面) this.$RouteManager.backByName('page-1') }, backToHome(){ // 調(diào)用 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頁面調(diào)用this.$RouteManager.setHome('page-A')或者this.$RouteManager.setHome()
接著B頁面需要返回的時(shí)候調(diào)用this.$RouteManager.backHome()即可
setHome([name])
name
Type: String
name所指路由列表當(dāng)中的 name { path: '/page_3', name: 'page-3', component: Page-3 }
Default: 當(dāng)前路由的name
設(shè)置需要最終返回的頁面路由name
backHome()
回退到home頁, 通過setHome來設(shè)置home
backByName(name)
name
Type: String
name所指路由列表當(dāng)中的 name { path: '/page_3', name: 'page-3', component: Page-3 }
回退到指定name的頁面
關(guān)于“Vue中路由回退的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。