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()}},