Vue 返回上一页页面不刷新

场景：首页点进列表页时要刷新数据，信息页返回列表页时不刷新数据

首先在router.js中配置

     {path: '/home',name: 'home',meta: {title: '首页',},component: () => import('./views/home/index.vue'),},{path: '/info/:id',name: 'info',meta: {title: '信息',keepAlive: true,///此组件需要缓存isBack: false,//用来判断是否是返回上一页},component: () => import('./views/home/info.vue'),},{path: '/home/view',name: 'view',meta: {title: '详情',},component: () => import('./views/home/view.vue'),},

在App.vue中设置需要缓存的页面

    <keep-alive><router-view v-if="$route.meta.keepAlive" class="Router" ></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" class="Router" ></router-view>

在中间页面就行判断

  beforeRouteEnter(to, from, next) {//from从哪个页面过来的信息//to 到哪个页面来console.log(to)console.log(from)//用来判断是否缓存if (from.name === 'view') {to.meta.isBack = true}if (from.name === 'home') {to.meta.isBack = false}next()},//如果不设置keepAlive：beforeRouteEnter--》created--》  mounted--》destroyed//因为设置了keepAlive第一次进入时keepAlive会运行beforeRouteEnter--》activated--》created--》  mounted--》deactivated//第二次进入时只会运行beforeRouteEnter--》activated--》deactivatedactivated() {if (!this.$route.meta.isBack) {beforeRouteEnter--》activated--》created--》  mountedconst { id } = this.$route.paramsthis.id = idthis.loadData()}},

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

JS——返回上一页页面不刷新
function goback() {if (document.referrer) {window.location.href = document.referrer;} else {window.l ...
VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
vue/uniapp - 返回上一页并onLoad刷新数据
在uni中,返回页面是不会触发onLoad方法的: 如果我们只想在特定情况下返回上一页才需要刷新数据,那么用onShow的话,那刷新就太频繁了: 这时候,可以用$emit和$on去解决. 比如说,从详 ...
ionic 返回上一页，并刷新父页面
ionic 返回上一页,并刷新父页面使用Angular中EventEmitter事件驱动实现不同页面通讯 Ionic4中内置的生命周期函数:ionViewDidLeave - 在页面离开后触发 io ...
vue返回上一页并不刷新
vue返回上一页并不刷新 vue返回上一页并不刷新 1.首先添加在主页面添加keep-alive <keep-alive ><router-view :key="key&q ...
微信中苹果h5页面用window.history.go(-1)返回上一页页面不会重新加载/刷新
微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题问题描述:在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history ...
解决VUE返回上一页，上一页空白问题
问题: 我做项目的时候发现vue返回上一页的时候, 有时候router不会读取router上的参数,就会导致我的项目空白. 思路: 让返回上一页的时候,上一页能读取到路由参数解决: 根据上下页的n ...
vue返回上一页不刷新页面的方法 / vue缓存页面
问题: vue框架下,在返回上一页的时候(this.$router.go(-1)) ,默认会让上个页面重新执行一遍生命周期(即被刷新了). 想达到的效果: 返回上一页不刷新页面. 解决方法: 缓存上一 ...
JavaScript返回上一页后并刷新页面
一.返回上一页并刷新页面: window.location.replace(document.referrer); document.referrer:可以引用到上一个页面,这个属性是由浏览器支持的. ...

Vue 返回上一页页面不刷新

Vue 返回上一页页面不刷新

场景：首页点进列表页时要刷新数据，信息页返回列表页时不刷新数据

首先在router.js中配置

在App.vue中设置需要缓存的页面

在中间页面就行判断

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

最新文章

热门文章