vue location.href跳转不刷新页面

时间: 2023-09-29 17:06:08 浏览: 223

vue页面跳转后返回原页面初始位置方法

5星 · 资源好评率100%

vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 } 在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性。以下是如何在Vue中实现这一功能的详细步骤： 1. **安装并配置Vuex**：确保已经安装了Vuex库。如果没有，可以使用npm或yarn进行安装： ``` npm install vuex 或 yarn add vuex ``` 在`main.js`中引入并注册Vuex： ```javascript import Vuex from 'vuex' Vue.use(Vuex) ``` 创建一个新的Vuex Store实例，并定义一个状态变量来存储滚动位置： ```javascript const store = new Vuex.Store({ state: { recruitScrollY: 0 }, getters: { recruitScrollY: state => state.recruitScrollY }, mutations: { changeRecruitScrollY(state, recruitScrollY) { state.recruitScrollY = recruitScrollY } }, actions: {}, modules: {} }) ``` 2. **记录离开页面时的滚动位置**：在需要记录滚动位置的页面（如`listview`页面），在`beforeRouteLeave`生命周期钩子中，获取当前页面的滚动位置，并将其存储到Vuex的`recruitScrollY`状态中： ```javascript beforeRouteLeave(to, from, next) { let position = window.scrollY if (position == null) position = 0 this.$store.commit('changeRecruitScrollY', position) next() } ``` 3. **监听路由变化**：使用Vue的`$route`对象的watcher，当路由改变时，检查是否回到了原来的页面（例如`NewRecruit`页面），并使用存储的滚动位置设置页面滚动： ```javascript watch: { '$route': function(to, from) { if (to.name === 'NewRecruit') { let recruitScrollY = this.$store.state.recruitScrollY window.scrollTo(0, recruitScrollY) } } } ``` 4. **使用`keep-alive`组件**：为了防止页面被重新创建（即避免`created`生命周期钩子的执行），可以使用Vue的`keep-alive`组件。这将缓存组件实例，使得再次访问时，组件的状态得以保留。在`App.vue`模板中，使用`keep-alive`包裹需要缓存的`router-view`： ```html <keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> ``` 然后在`router/index.js`中的路由配置中，为需要缓存的路由添加`meta`属性： ```javascript const routes = [ { path: '/NewRecruit', name: 'NewRecruit', component: NewRecruit, meta: { keepAlive: true } }, { path: '/NewRecruitDesc/:id', name: 'NewRecruitDesc', component: NewRecruitDesc, meta: { keepAlive: true } }, { path: '/SubmitSuccess', name: 'SubmitSuccess', component: SubmitSuccess, meta: { keepAlive: false } } ] ``` 通过以上步骤，我们实现了在Vue页面跳转后返回原页面时，页面能自动滚动到离开时的位置。这种方式结合了Vue的生命周期、Vuex的状态管理和Vue Router的`keep-alive`特性，确保了用户体验的连贯性。记得根据你的实际项目结构和需求进行适当的调整。

当使用Vue中的`location.href`进行页面跳转时，如果当前页面的URL和跳转的URL是相同的，页面可能不会刷新。这是因为`location.href`只会在URL发生改变时才会重新加载页面。例如，如果你想从页面B跳转到页面A，并且它们的URL是相同的（例如都是https://www.baidu.com），那么页面可能不会刷新。另外，当使用`location.href`进行页面跳转时，如果存在一个提交按钮并且在触发事件后会先提交表单，那么页面跳转可能会失效。解决这个问题的方法是将按钮的类型从`submit`改为`button`。如果你希望在跳转后刷新页面，可以在使用`window.location.href`后再使用`window.location.reload()`方法，这样页面会重新加载。综上所述，如果你在Vue中使用`location.href`进行跳转并希望刷新页面，你可以尝试以下解决方案： 1. 确认跳转的URL和当前页面的URL是否相同，如果相同，则可能不会刷新页面。 2. 如果存在一个提交按钮并且在触发事件后会先提交表单，考虑将按钮的类型改为`button`。 3. 在使用`window.location.href`后，使用`window.location.reload()`方法重新加载页面。希望这些解决方案对你有帮助！123 #### 引用[.reference_title] - *1* *3* [使用window.location.href跳转页面不刷新的问题](https://blog.csdn.net/u010856177/article/details/127306432)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [window.location.href 跳转失效问题解决办法](https://blog.csdn.net/qq_39506434/article/details/130256273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文

vue location.href跳转不刷新页面

相关推荐

vue中解决微信html5原生ios虚拟键返回不刷新问题

vue的token刷新处理的方法

vue window.location.href不跳转

vue可以用window.location.href跳转吗

vue中window.location.href

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

vue-router和location.href的区别

在vue，h5项目中，使用location.href跳转页面，为什么首次跳转需要很久？应该怎么解决

window.location.href去的新vue页面，vue页面如何进行强制刷新

vue中window.location.href能生效吗？

路由跳转和 location.href的区别

window.location.href缺点

location.href和router

location.href和router.link区别

window.location.href和router.push有什么区别

location.href和this.$router.push的区别

vue刷新页面

vue2 this.$router.replace跳转后不可以返回上一页面怎样实现

vue router 和location·href

最新推荐

vue页面跳转后返回原页面初始位置方法

详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

代驾应用系统 SSM毕业设计 附带论文.zip

Java集合ArrayList实现字符串管理及效果展示

管理建模和仿真的文件

【MATLAB信号处理优化】：算法实现与问题解决的实战指南

在西门子S120驱动系统中，更换SMI20编码器时应如何确保数据的正确备份和配置？

实现2D3D相机拾取射线的关键技术

"互动学习：行动中的多样性与论文攻读经历"

【MATLAB时间序列分析】：预测与识别的高效技巧

代驾应用系统 SSM毕业设计附带论文.zip