路由管理器

记录每次跳转的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 上
Vue.use(VueRouteManager, { /* ...ManagerOptions */ })

// 使用 v-cache-route-stack 将 router-view 包裹
<v-cache-route-stack>
  <router-view />
</v-cache-route-stack>
// 此时在页面中可以用 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.setMark('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(){
         // 调用 toMark 来返回到最开始记录的 home 页
         this.$RouteManager.toMark()
      }
   }
}
</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>
<script>
exprot default {
   methods: {
      backToPage(){
         // 调用 backToRoute 来返回到指定页(必须经历过此页面)
         this.$RouteManager.backToRoute('page-1')
      },
		backToHome(){
         // 调用 toMark 来返回到最开始记录的 home 页
         this.$RouteManager.toMark()
      }
   }
}
</script>

解决问题

A --> B --> C --> D --返回-> A // 情况一
 |--> B-1 ------> D --返回-> A // 情况二
 |--> B-2 --> C-2 -->C-2-1 --> D --返回-> A // 情况三

首先在A页面调用this.$RouteManager.setMark('page-A')或者this.$RouteManager.setMark()

接着B页面需要返回的时候调用this.$RouteManager.toMark()即可

Methods

setMark([mark])

• mark
  • Type: String
  • mark所指路由列表当中的 fullPath|name this.$route.fullPath || this.$route.name
  • Default: 当前路由的 fullPath

设定路线标记

toMark()

返回到标记点, 通过setMark来设置mark

backToRoute(route)

• route
  • Type: String | RoutePops
  • route所指路由列表当中的 this.$route
  • RoutePops.name：this.$route.name
  • RoutePops.path：this.$route.fullPath

回退到指定路线