路由管理器
記錄每次跳轉的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插件來處理這一系列復雜的問題
入門
|
1
|
npm i vue-route-manager -S
|
|
1
2
3
4
5
6
7
8
9
|
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 }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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 }
|
1
2
3
4
5
6
7
|
<
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 }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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 }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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的頁面，以上內容由縮我短鏈接整理。