需求场景首页搜索内容，点击跳转到详情页，页面返回首页，搜索结果保存。解决方案：路由参数；路由卫士需求描述在使用vue开发前端时，遇到一个场景：在首页搜索一些数据，点击搜索结果进入详情页，浏览详情页后返回首页。但此时之前的搜索记录和翻页都消失了，用户体验不好。所以返回后需要恢复跳转前的页面参数状态。当然，如果条件允许，最简单的方法就是点击搜索结果，用新的页面打开（比如百度）。但是目前要求是一个完整的vue开发项目，不是开站外地址，细节也不多，所以不适合用新建页面（性能差，容易创建海量标签页).这里给出两种比较容易实现的方案：方案一：将搜索参数存放在路由参数（route.query）中，在加载页面时根据参数进行搜索。优点：刷新不影响；实现简单缺点：参数只能是基本类型，长度有限；这条路看起来很难看；只对浏览器返回有效，手动跳回首页是不行的。方案二：使用路由守卫钩子，在离开页面前将页面参数存储到本地（vuex、LocalStorage等）。优点：参数类型的长度比较自由；这条路看起来清爽美丽；以任何方式返回首页都有效缺点：需要额外的数据存储操作，如果使用store模式或者vuex，刷新页面会失败。方案一：如果路由参数不多，而且不介意路径后面有一堆参数的话（强迫症的眼泪），可以直接把参数放在路由路径中。点击搜索后，使用vuerouter跳转并传递参数：//搜索页面search(param){//其他处理this.$router.push({name:"Index",query:{...this.queryParam},//将对象展开成一个键值});},注意查询参数和params传递参数的区别：前者的参数后面会跟?k1=v1&k2=v2形式的路径,可以直接在地址栏中看到，不受页面跳转和刷新的影响；后者只在第一次跳转时用到对应页面时起作用，刷新后跳转消失。所以这里需要使用query来传递参数。也可以根据格式手动在路径中写入参数，但可读性和可扩展性明显变差。除非只有一两个简单的参数，否则不推荐。另外，由于这个参数是要放到路径里面的，所以只能是基本类型的键值对，不能很好的支持数组或者对象。如果参数简单，可以扩展对应的对象作为参数（需要保证不同对象中没有同名的key），但是在跳转到的搜索结果页面读取时，可以只能一一得到。//搜索结果页面mounted(){//区分$route和$routerif(this.$route.query.type){lettype=this.$route.query.type;letkeyword=this.$route.query.keyword;//...一个一个获取每个参数//执行搜索操作}else{//没有搜索参数（因为我的搜索结果和首页是同一个页面，所以有可能只是正常打开首页）}}、方案二：本地存储参数由于我要存储的参数是三个对象，扩展成键值太不方便，所以采用了这种方案。由于项目中也使用了vuex，所以顺便存放在vuex中，也可以根据实际情况存放在任何地方。vuex的缺点是一刷新就刷完了，对优化搜索结果体验的功能作用不大；如果有相应的需求，可以存储在本地存储中。因为我的需求中更改参数的方式有很多，更改时存储参数太麻烦，容易出错或遗漏。因此，这里我们选择在路由跳转之前统一存储需要的参数。VueRouter提供了一系列用于路由和导航守卫的API来实现相应的功能，包括全局前/解析/后守卫、路由配置守卫和组件守卫。所谓的“守卫”其实就相当于渲染过程中的“钩子”，和大家熟悉的created和mounted是一样的。完整的导航分析过程：1.导航被触发。2.在去激活的组件中调用beforeRouteLeave守卫。3.调用全局beforeEach守卫。4.在可重用组件中调用beforeRouteUpdate守卫（2.2+）。5.在路由配置中调用beforeEnter。6.解析异步路由组件。7.在激活的组件中调用beforeRouteEnter。8.调用全局beforeResolve守卫(2.5+)。9.确认导航。20.调用全局afterEach钩子。11.触发DOM更新。12.在beforeRouteEnterguard中调用传递给next的回调函数，创建的组件实例会作为回调函数的参数传入。显然，这里使用beforeRouteLeavehook可以很好的满足需求：//搜索结果页面beforeRouteLeave(to,from,next){//vuex存储操作this.$store.commit("updateRevert",{query:this.queryParam,页面：this.pageParam，过滤器：this.filter，}）；下一个（）;//继续后续的导航解析流程}，在加载页面时检查是否有保存的参数，如果有则进行相应的恢复：//搜索结果页面mounted(){//判断vuex中是否有保存的搜索参数if(this.$store.state.revert){constrevert=this.$store.state.revert;this.queryParam=revert.query;this.pageParam=revert.page;//可以直接检索整个对象//搜索操作}else{//没有搜索参数（因为我的搜索结果和首页是同一个页面，所以正常打开首页是可以的）}},为了帮助大家更好的复习重点知识，更高效的准备面试，我们整理了《Vue 面试题总结》的电子稿文件。vue面试题1.vue.js的两大核心是什么？2、vue的双向绑定原理是什么？3、vue生命周期钩子函数有哪些？4、v-if和v-show有什么区别？5.vue中常用的修饰符6.nextTick7.vue生命周期是什么8.数据响应（数据劫持）9.虚拟dom原理实现10.Proxy相对于defineProperty的优势11.vuex12中key值的作用vue13为什么.Vue组件中的数据必须是函数？14.v-for和v-if的优先级15.说出vue中至少4条指令及其用法16.vue中从子组件调用父组件的方法17.从子组件调用子组件的方法vue18中的父组件。vue页面级组件之间传值19.说说vue的动态组件。20.keep-alive内置组件的作用结束语以上就是两种保存页面状态的方式的分享。其中很多选择都与当时的实际需求相关，因此不一定是所有场景下的最佳方案。针对您的具体需求，可能文章中的解决方案不够完善，或者有更简单的方法，欢迎在评论区留言。那么完整版的Vue面试题总结可以点这里获取。
