Vue 返回上一页页面不刷新,vue数据刷新了页面不刷新

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--》deactivated activated() { if (!this.$route.meta.isBack) {beforeRouteEnter--》activated--》created--》 mounted const { id } = this.$route.params this.id = id this.loadData() } },