vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置

1、最近用vue做前端项目，从查询页面进入详情页时，返回页面需要保留上次的查询条件，表格当前页数。 2、从其他菜单进去，不需要缓存，要保持页面的初始状态。 基于上面两种情况，我打算用vue中的keep-alive来缓存页面。

列表项目 . 用vue的内置组件keep-alive来缓存列表页面，再路由出口渲染组件时配置：

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

在路由选项中，配置meta属性，keepAlive为true即为需要缓存，同时设置isBack属性，用来标识页面是否是从详情页面返回的。

                  meta: {
              activeMenu: '/gasstation/gasstationManager',
              title: '',
              keepAlive: true, // 需要被缓存
              isBack: false // 标识是否是详情页
            }

通过beforeRouteEnter(to,from,next)，来判断路由是从哪里跳转的，如果是从详情页跳转的，将当前路由对象的meta.isBace设置为true，否则设置为false。（设置在查询页面）

      beforeRouteEnter (to, from, next) {
        if (from.path === '/gasstation/goodsManager/EditShowList') {
          // 详情页路由
          to.meta.isBack = true
        } else {
          to.meta.isBack = false
        }
        next()
      },

为了在其他页面进入时，更新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页，需要对该条数据进行修改时，修改成功后返回，应该更新列表。

      activated () {
        if (!this.$route.meta.isBack) {
          this.searchForm = {} // 不是详情页面(detail.vue)进入，更新初始化列表数据
          this.onSearch()
        } else {
          // 这是详情页返回，可任意写自己需要处理的方法
          this.search()// 这里是将详情进行编辑后进行搜索，避免编辑未能查看最新编辑列表
          this.$route.meta.isBack = false // 重置详情页标识isBack
        }
}

最后一步，离开详情路由的时候，设置列表路由配置信息

      beforeRouteLeave (to, from, next) {
        to.meta.keepAlive = true // 给列表(list.vue)页面设置keepAlive
        next()
      },