vue路由前进后退,vue路由跳转禁止返回
最近做了一个关于路由场景的vue项目，在这里做了记录。本文主要介绍Vue路由回退的完善解决方案，主要使用vue-route-manager。有需要的朋友可以参考一下。
目录
路由管理器背景方法简介问题解决概述
路由管理器
记录每次跳转的vue-route名称，还有一些内置的处理fallback的方法，方便回退到指定页面。
背景
在作者开发的项目中，经常会遇到各种花式跳跃。比如从引导页的选择操作到最后的提交审批，会经过无数的页面，甚至中间不同的操作会导致不同的后退深度。
假设项目的起点是选择页面，最终会到达提交页面，返回到原始页面(选择页面)。
选择页面- B - C -提交页面。
当情况从选择到提交经过B和C时，需要调用router.go(-3)返回a。
-
选择页面-B- 1-提交页面。
第二种情况从选择到提交只经过B-1。此时，go(-3)不再适用。此时，可以添加查询参数(频道id)来区分第二种情况。
-
选择页面-b-2-c-2-c-2-1-提交页面。
在这种情况下，会发现不仅go(-3)不适用，还需要多一种类型的查询参数。如果后续需要区分更多的渠道，可想而知。
这时候就可以使用RouteManager插件来处理这一系列复杂的问题了。
入门
npm i vue路线管理器
从“vue”导入Vue
//介绍路由管理器
从“vue-route-manager”导入VueRouteManager
//并将其安装在Vue上
Vue.use(VueRouteManager，{ /*.ManagerOptions */})
//此时，可以使用这个。$RouteManager以访问管理器。
管理选项参数描述
参数名称
类型
必须
形容
路由器
武鲁特
Y
虚拟路由器对象
调试
布尔代数学体系的
普通
打开调试？
例子
主页
路由信息{路径：/home ，名称： home ，组件：home}
模板
按钮@click=跳转下一页/按钮
/模板
脚本
默认表达式{
方法：{
jump(){
//记录第一页的名称
这个。$RouteManager.setHome(home )
这个。$router.push({ name: page-1 })
}
}
}
/脚本
第1页
路由{路径：/page _ 1 ，名称： page-1 ，组件：page-1}
模板
div class=page-1
第一页
button @ click= $ router . push({ name: page-2 }) Next/button
button @ click= $ router . replace({ name: page-1 })重定向/button
/div
/模板
第2页
路由{路径：/page _ 2 ，名称： page-2 ，组件：page-2}
模板
div class=page-2
第2页
button @ click= $ router . push({ name: page-3 }) Next/button
按钮@click=backToHome 返回主页/按钮
/div
/模板
脚本
默认表达式{
方法：{
backToHome(){
//调用backHome返回第一个记录的主页。
这个。$RouteManager.backHome()
}
}
}
/脚本
第3页
路由{路径：/第3页，名称：第3页，组件：第3页}
模板
div class=page-3
第3页
按钮@click=$backToHome 返回主页/按钮
Button @click=backToPage 返回第1页/button
/div
/模板
默认表达式{
方法：{
backToPage(){
//调用backByName返回指定页面(您必须体验过此页面)
这个。$ route manager . back byname( page-1 )
},
backToHome(){
//调用backHome返回第一个记录的主页。
这个。$RouteManager.backHome()
}
}
}
/脚本
解决问题
A - B - C - D -返回-A //案例1
-B-1-D-Return-A //案例2
-B-2-C-2-C-2-1-D-Return-A //情景3
首先，叫这个。$RouteManager.setHome (page-a )或this。第a页上的$ routemanager.sethome()。
那就叫这个。需要返回页面B时的$RouteManager.backHome()。
Methods
setHome([name])
名字
类型：字符串
名称引用的路由列表中的名称{path:/page _ 3 ，名称： page-3 ，组件：page-3}
默认值：当前路线的名称
设置最终需要返回的页面路由名称。
backHome()
回到主页，通过setHome设置home。
backByName(name)
名字
类型：字符串
名称引用的路由列表中的名称{path:/page _ 3 ，名称： page-3 ，组件：page-3}
返回到具有指定名称的页面
总结
就是这样。这篇关于Vue路由回退的完美解决方案vue-route-manager的文章，都在这里。有关Vue路由回退的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。