vue-router 用 router.go(-1) 返回上级页面后,如何不刷新数据?

时间: 2023-09-09 22:00:26 浏览: 94
在使用vue-router中的router.go(-1)返回上级页面时,如果不想刷新数据,可以通过以下几种方法实现: 1. 使用keep-alive组件:在要返回的上级页面中,使用keep-alive组件包裹需要保持不刷新的组件或页面,这样就可以在返回时保持之前的数据状态,而不会刷新数据。 2. 使用vuex进行数据管理:将需要保持的数据存储在vuex的状态管理中,在返回上级页面时,重新渲染组件时直接从vuex中读取数据,这样即使组件刷新,也能保持之前的数据状态。 3. 在router.go(-1)时传递数据:在返回上级页面的时候,可以通过在路由跳转时传递参数的方式,将需要保持的数据传递给上级页面,上级页面接收参数后展示之前的数据。 4. 使用浏览器的缓存机制:如果数据是从接口请求得到的,可以在请求返回时使用浏览器的缓存机制(比如localstorage或sessionstorage)进行存储,在返回上级页面时再从缓存中读取数据,从而实现数据不刷新。 综上所述,可以通过使用keep-alive组件、vuex数据管理、传递数据、或者浏览器缓存等方式来实现在返回上级页面时不刷新数据。具体选用哪种方式要根据具体的业务需求和情况来确定。
相关问题

Vue-router跳转和location.href有什么区别?

Vue-router是Vue.js的官方路由插件,它基于Vue.js的生命周期和组件系统,实现了客户端路由的跳转。而location.href则是原生JavaScript的跳转方式。 它们的主要区别在于: 1. Vue-router实现了SPA(Single Page Application)的路由跳转,而location.href刷新页面会重新加载所有资源,不适合SPA。 2. Vue-router可以实现无刷新跳转,而location.href是整页刷新。 3. Vue-router可以通过路由参数进行传参,而location.href需要手动拼接url参数。 4. Vue-router可以通过路由守卫进行权限控制,而location.href无法做到。 因此,在Vue.js开发中,推荐使用Vue-router进行路由的跳转。

vue-router.esm.js?8c4f:2257 ReferenceError: _hmt is not defined at eval (permission.js?223d:15) at iterator (vue-router.esm.js?8c4f:2300) at step (vue-router.esm.js?8c4f:1947) at runQueue (vue-router.esm.js?8c4f:1955) at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2330) at HTML5History.transitionTo (vue-router.esm.js?8c4f:2203) at VueRouter.init (vue-router.esm.js?8c4f:2923) at Vue.beforeCreate (vue-router.esm.js?8c4f:1271) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4219) abort @ vue-router.esm.js?8c4f:2257 vue.runtime.esm.js?2b0e:8429 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools :8000/CLodopfuncs.js?priority=1:1 Failed to load resource: net::ERR_CONNECTION_REFUSED :18000/CLodopfuncs.js?priority=0:1 Failed to load resource: net::ERR_CONNECTION_REFUSED 如何解决

这些错误信息是关于Vue Router和Vue的一些问题。首先,关于`ReferenceError: _hmt is not defined`错误,它指出 `_hmt` 在 `permission.js` 的第15行未定义。解决方法可能是确保在使用 `_hmt` 变量之前将其正确定义。 对于 `Failed to load resource: net::ERR_CONNECTION_REFUSED` 错误,它表示浏览器无法连接到指定的资源。这可能是由于网络连接问题或资源服务器未启动导致的。你可以尝试检查网络连接是否正常,并确保资源服务器正在运行。 此外,关于 `Download the Vue Devtools extension for a better development experience` 的消息是建议你下载 Vue Devtools 扩展程序以获得更好的开发体验。你可以按照链接提供的说明下载和安装 Vue Devtools。 总之,解决这些问题的方法包括:确保变量和资源正确定义,检查网络连接和资源服务器状态,并下载并安装 Vue Devtools 扩展程序。希望这些信息对你有所帮助!

相关推荐

WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead. INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 17 warnings 09:43:57 warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'computed' was not found in 'vue' warning in ./src/router/index.js "export 'default' (imported as 'VueRouter') was not found in 'vue-router' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'defineComponent' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'getCurrentInstance' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'h' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'inject' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'nextTick' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onActivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onDeactivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onUnmounted' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'provide' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'reactive' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'ref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'shallowRef' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'unref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watch' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watchEffect' was not found in 'vue'这个报错因为什么

最新推荐

recommend-type

vue-router 中router-view不能渲染的解决方法

本篇文章主要结合了vue-router 中router-view不能渲染的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
recommend-type

vue-router实现tab标签页(单页面)详解

主要为大家详细介绍了vue-router实现tab标签页的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
recommend-type

Vue中在新窗口打开页面及Vue-router的使用

主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
recommend-type

vue-router二级导航切换路由及高亮显示的实现方法

1.设计导航页面样式 第一个导航页面为Discover Discover.vue: <!-- --> 发现 [removed] export default { name: "discover", data() { return { }; } }; [removed] <style scoped> </...
recommend-type

vue-router的使用方法及含参数的配置方法

主要介绍了vue-router的使用方法及含参数的配置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
recommend-type

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

REALTEK 8188FTV 8188eus 8188etv linux驱动程序稳定版本, 支持AP,STA 以及AP+STA 共存模式。 稳定支持linux4.0以上内核。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

:YOLO目标检测算法的挑战与机遇:数据质量、计算资源与算法优化,探索未来发展方向

![:YOLO目标检测算法的挑战与机遇:数据质量、计算资源与算法优化,探索未来发展方向](https://img-blog.csdnimg.cn/7e3d12895feb4651b9748135c91e0f1a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rKJ6YaJ77yM5LqO6aOO5Lit,size_20,color_FFFFFF,t_70,g_se,x_16) # 1. YOLO目标检测算法简介 YOLO(You Only Look Once)是一种
recommend-type

def ObjFun(x,y,beta): # 目标函数 """ Logistic regression loss function :param beta: model parameter vector :param x: feature matrix :param y: label vector :return: loss value """ n = x.shape[0] p = x.shape[1] pred = 1 / (1 + np.exp(-np.dot(x, beta))) pred = np.clip(pred, 1e-15, 1 - 1e-15) # 将预测值限制在一个很小的区间内 ObjVal = -np.sum(y * np.log(pred) + (1 - y) * np.log(1 - pred)) / n return ObjVal

好的,根据上面的目标函数,我们可以推导出其对应的梯度向量函数,如下所示: def gradient(x, y, beta): """ Compute gradient of the logistic regression loss function :param beta: model parameter vector :param x: feature matrix :param y: label vector :return: gradient vector """ n = x.shape[0] pred = 1 /
recommend-type

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识,同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统,学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中,学生需要对超市商品和销售员的关系进行有效管理,使系统功能更全面、实用,从而提高用户体验和便利性。 学生在课程设计过程中展现了积极的学习态度和纪律,没有缺勤情况,演示过程流畅且作品具有很强的使用价值。设计报告完整详细,展现了对问题的深入思考和解决能力。在答辩环节中,学生能够自信地回答问题,展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定,认为学生在课程设计中表现出色,值得称赞。 整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分,其中平时表现占比20%,报告成绩占比40%,演示与答辩成绩占比40%。通过这三个部分的综合评定,最终为学生总成绩提供参考。总评分以百分制计算,全面评估学生在课程设计中的各项表现,最终为学生提供综合评价和反馈意见。 通过校园超市商品信息管理系统课程设计,学生不仅提升了对程序设计基础知识的理解与应用能力,同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力,为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中,不仅获得了理论知识的提升,同时也锻炼了实践能力和创新思维,为其未来的职业发展奠定了坚实基础。 校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握,同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量,学生设计了一个实用、高效的校园超市商品信息管理系统,为用户提供了更便捷、更高效的管理和使用体验。 综上所述,校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计,学生不仅深化了对程序设计基础知识的理解,还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础,使其在实际工作中能够胜任更多挑战。