vue返回上一页面时不刷新

前景：

在日常使用的时候，我们经常需要返回上一级页面的时候，不刷新页面，保持页面不变，这里就需要使用以下方法：

思路：

因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：
(1).在App.vue中加入：这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。

<template><div id="app"><!--<router-view/>--><!--页面返回不刷新--><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template>

(2).index.js页面
在需要设置不刷新的页面中，只需要添加 keepAlive: true就可以。


export default new Router({routes: [{path: '/',name: 'index',component: index,meta: {keepAlive: true}},

至此返回上级页面不刷新功能实现：因为在index.vue中，mounted方法只走一次，在浏览器上实现了返回原来滚动位置的目的。

说明

备注：一般执行完上一步的时候就已经实现方法了，如果在手机上测试，发现没用：可以试着添加下面的代码试一下：

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {this.scrollTop = document.documentElement.scrollTop || document.body.scrollTopnext()},

//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {next(vm => {document.body.scrollTop = vm.scrollTop})},

至此完美结束，算是一个比较常见而且简单的功能了。

vue返回上一页面时不刷新相关推荐

Vue返回上一个页面时如何触发上一个页面的方法
Vue返回上一个页面时如何触发上一个页面的方法返回时是利用浏览器的缓存,我们可以利用route不一样来监听. 代码: watch: {$route(now, old) {// 判断逻辑if (now ...
vue返回上一页面时记忆回到原先滚动的位置
因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: 1. 在App.vue中加入: <template><div id="a ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序返回上一级页面并传值刷新
1 说明在很多业务场景之下,需要返回上一级页面,并进行刷新,在微信小程序中的wx.navigateBack 方法中,返回上一页是不会刷新的.如果上一页的页面加载是在onLoad方法中触发的话,那么 ...
uniapp如何实现返回上一级页面并传值刷新
在很多业务场景之下,需要返回上一级页面,并进行刷新,在uniapp中的uni.navigateBack 方法中,返回上一页是不会刷新的,更别说传值了,废话不多说直接上代码. 我们假设需要返回上一级页面 ...
vue返回上个页面，页面不刷新，使用vue的keep-alive
1.在路由上添加keepAlive为true,该页面缓存,进去该页面,不会刷新 {path: 'list',component: () => import('@/views/merchants/ ...
JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?
history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...
uni-app返回上一层页面后数据刷新重置解决办法，uni-app页面不刷新，强制刷新页面方法！
页面跳转后返回之前页面数据全部重置刷新了大概意思就是从a页面去b页面办了点事,在回到a页面时之前填写的数据没了,页面数据重置了怎么办,这个应该只有新手会犯这个错误,可以看看官方文档:uni-app页 ...
返回上一个页面，并刷新
适用的范围:退出登录后跳转到上一个页面 PrintWriter out = this.getResponse().getWriter();out.write("<script type ...

vue返回上一页面时不刷新

前景：

思路：

说明

vue返回上一页面时不刷新相关推荐

最新文章

热门文章