vue返回上一个路由,vue路由跳转关闭当前页面
在使用Vue开发前端的时候，遇到过在首页搜索一些数据，点击搜索结果进入详情页，浏览完详情页后又返回首页的场景，所以返回后需要恢复跳转前的页面参数状态。今天通过这篇文章给大家分享一下Vue路由页面状态返回的操作方法。让我们看一看。
路由参数，路由导航卫士：页面回退返回时，保留搜索结果。
场景：在首页搜索内容，点击跳转到详情页，页面会回到首页，保留搜索结果。
方案：路由参数；路线防护装置
需求描述
使用Vue开发前端时，我碰到一个场景：在首页做一些数据搜索，点击搜索结果进入详情页，浏览详情页，返回首页。但此时之前的搜索记录和翻页都消失了，用户体验并不好。所以返回后需要恢复跳转前的页面参数状态。
当然，如果条件允许，最简单的方法就是点击搜索结果打开新的页面(比如百度的)。但是现在的需求是一个完整的Vue开发项目，不是开一个异地地址，细节也不多，不适合用新页面(性能差，容易做海量的标签页)。
这里有两个易于实施的解决方案：
方案一：将搜索参数存储在路由参数(route.query)中，加载页面时根据参数进行搜索。
优点：清爽不影响；简单实现
缺点：参数只能是基本类型，长度有限；小路看起来很丑；仅对浏览器返回有效，对手动跳转回主页无效。
方案二：使用route guard钩子本地存储页面参数(vuex，本地存储等。)才离开页面。
优点：参数类型长度相对自由；小路看起来清爽美丽；以任何方式返回主页都是有效的。
缺点：需要额外的数据存储操作，如果使用store模式或vuex，刷新页面将无效。
方案一：路由参数
如果参数不多，也不介意路径后面一堆参数(强迫症的眼泪)，可以直接把参数放在路由路径里(比如百度是这样的：baidu.com/s? WD=ABC RSV _ SPT=1 RSV _ IQID=0x8a 76279 a 000 e 2979.你也看到了，真的是一大堆)。
点击搜索后，使用vue路由器跳转并传输引用：
//搜索页面
搜索(参数){
//其他处理
这个。$router.push({
名称：“索引”，
查询：{.this.queryParam }，//将对象扩展到键值
});
},
注意query参数和params参数的区别：前者的参数会以？表单k1=v1k2=v2延续在路径后面，在地址栏可以直接看到，所以不受页面跳转和刷新的影响；后者只有在你第一次跳转到相应页面，然后刷新跳转时才起作用。因此，这里使用query来传递参数。也可以根据格式手工编写path中的参数，但是可读性和扩展性明显要差一些。除非只有一两个简单的参数，否则不建议使用。
另外，因为这个参数要放入路径中，所以只能是基本类型的键值对，数组或者对象都不太支持。如果参数比较简单，可以将对应的对象展开为参数(需要保证不同对象中没有重复的键)，但是在跳转到的搜索结果页面中读取属性时，只能逐个获取属性。
//搜索结果页面
已安装(){
//区分$route和$router
如果(这个。$route.query.type) {
让type=this。$ route . query . type；
让关键字=这个。$ route . query . keyword；
//.逐个获取每个参数
//执行搜索操作
}否则{
//没有搜索参数(因为我的搜索结果和主页是同一个页面，有可能只是正常打开主页)
}
},
方案二：本地存储参数
因为我要存储的参数是三个对象，扩展成键值太不方便，所以用了这个方案。因为vuex本来是在项目中使用的，所以顺便在vuex中存在。可以根据实际情况存在于任何地方。vuex的缺点是刷新时不能刷，对优化搜索结果体验性质的功能影响不大。如果有相应的需求，可以存储在本地存储中。
因为我的需求中更改参数的方式很多，更改时保存参数太麻烦，容易出错或遗漏。因此，我们选择在路由跳转之前存储所需的参数。
Erouter为路由导航守护提供了一系列API来实现相应的功能，包括全局前置/分析/后置守护、路由配置守护、组件守护等等。所谓的“守卫”其实相当于渲染过程中的“钩子”，就像大家熟悉的创建、挂载一样。
完整的导航分析流程：
导航被触发。
在停用的组件中调用beforeRouteLeave guard。
在每个守卫之前调用全局。
在重用的组件中调用beforeRouteUpdate guard (2.2)。
在路由配置中输入之前调用。
解析异步路由组件。
在激活的组件中调用beforeRouteEnter。
调用全局beforeResolve保护(2.5)。
导航确认。
调用全局afterEach钩子。
触发DOM更新。
调用beforeRouteEnter guard中传递给next的回调函数，创建的组件实例将作为回调函数的参数传入。
显然，在这里使用beforeRouteLeave hook可以很好地满足要求：
//搜索结果页面
beforeRouteLeave(收件人、发件人、下一个){
//vuex存储操作
这个。$store.commit(updateRevert ，{
查询：this.queryParam，
page: this.pageParam，
过滤器：this.filter，
});
next()；//继续后续的导航解析过程。
},
加载页面时，检查是否有保存的参数，如果有，进行相应的恢复操作：
//搜索结果页面
已安装(){
//确定vuex中是否有保存的搜索参数。
如果(这个。$store.state.revert) {
const revert=this。$ store . state . revert；
this . query param=revert . query；
this . page param=revert . page；//可以直接把整个对象拿出来
//搜索操作
}否则{
//没有搜索参数(因为我的搜索结果和主页是同一个页面，有可能只是正常打开主页)
}
},
结论参考
以上就是分享的两种保存页面状态的方法。这些选择很多都和当时的实际需求有关，所以不一定是所有场景下的最佳方案。针对你的具体需求，本文中的方案可能存在一些不足，也可能有更简单的方法；每一步的实际要求和依据都尽可能解释清楚，以供参考。对于文章中的疏漏和不足，请在评论中讨论指正。
可编程导航
路线防护装置
关于Vue路由返回恢复页面状态的这篇文章到此结束。有关Vue路由页面状态的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。