ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-07 17:03:53  阅读:198  来源: 互联网

标签:vue name -- route Page RouteManager manager page 路由


路由管理器

记录每次跳转的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的页面,以上内容由缩我短链接整理。

标签:vue,name,--,route,Page,RouteManager,manager,page,路由
来源: https://www.cnblogs.com/libaidwz/p/15239037.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有