vue缓存页面，返回上一页不刷新

1、在App.vue中使用keep-alive标签

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

2、在路由处添加keepAlive属性

  {
    path: '/webScoket/index',
    component: Layout,
    children: [
      {
        path: 'webScoket',
        component: () => import('@/views/webScoket/index'),
        name: 'webScoket',
        meta: { title: 'webScoket', keepAlive: true, isBack: false }
      }
    ],
    // component: () => import('@/views/device/daddress'),
    hidden: true
  },

3、在需要缓存的页面使用activated方法

  beforeRouteEnter(to, from, next) {
    // console.log('在之前植入', to.name)
    if (from.name === 'historyCompareChart_new') { // 这个name是下一级页面的路由name
      // console.log('在之前植入s')
      to.meta.isBack = true // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面
    }
    next()
  },
  activated() {
    // console.log('返回进入：', this.$route.meta.isBack)
    if (!this.$route.meta.isBack || this.isFirstEnter) {
      this.getSiteList() // 这里发起数据请求，（之前是放在created或者mounted中，现在只需要放在这里就好了，不需要再在created或者mounted中请求！！）
    }
    this.$route.meta.isBack = false // 请求完后进行初始化
    this.isFirstEnter = false // 请求完后进行初始化
  },

4、注意：在此页面要使用name需要与路由处的name一致：

export default {
  // components: { JsonExcel },
  inject: ['reload'],
  name: 'menu_154',
  directives: {
    waves
  }
  }