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

Vue路由回退的完美解决⽅案（vue-route-manager）⽬录
路由管理器
背景
⼊门
解决问题
Methods
总结
路由管理器
记录每次跳转的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 上
e(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路由回退内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。