Vue 緩存當前頁面keep-alive

需求：

產品經理在列表頁（幾千個數據，n個page）點擊某一項進去到詳情頁後，再返回到列表頁發現頁面回到了第一頁，找不到之前的查看的是哪一條了，爲了方便咋公司產品經理，返回列表頁時需要記住之前的page頁

解決思路：

在列表頁點擊某一條進入詳情頁的時候，觸發當前頁面的keep-alive緩存頁面

解決步驟：

1. 設置路由

需要緩存的路由設置 keepAlive : true, 不需要緩存的路由設置 keepAlive: false

router index.js

[
  {
    path: '/dm',
    component: Layout,
    redirect: '/dm/basic',
    name: '設備中心',
    meta: {
      title: '設備中心',
      icon: ''
    },
    children: [{
      path: 'basic',
      name: 'Basic',
      component: Basic,
      meta: {
        title: '設備管理',
        keepAlive: true // 需要緩存
      }
    }, {
      path: 'basic/decDetail',
      name: 'DeviceDetail',
      component: DeviceDetail,
      meta: {
        title: '設備詳情',
        level: 2,
        hidden: true,
        keepAlive: false // 不需要緩存
      }
    }]
  },
...

2. 列表頁

Bacic.vue

activated() {
    //只刷新數據，不改變整體的緩存
    this.getList()
  },
mounted () {
    this.getProductName()
  },
//修改列表頁的meta值，false時再次進入頁面會重新請求數據。
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
...

3. 詳情頁

basicDetail.vue

...
mounted () {
  },
  // 從詳情頁返回主頁時把主頁的keepAlive值設置爲true（要做個判斷，判斷是不是返回到主頁的）
  beforeRouteLeave (to, from, next) {
    if (to.name === 'Basic') {
      to.meta.keepAlive = true
    } else {
      to.meta.keepAlive = false
    }
    next()
  },
...

4. 這樣既可以保證keepAlive緩存了頁面，也可以保證再次進入緩存時刷新數據

activated() { //激活keep-alive緩存 

  this.getList()  // 只刷新數據， 不改變整體的緩存

},

deactivated () { //清除keep-alive的緩存
// this.$destroy(true)
},