vue网页缓存页面与不缓存页面处理

在主路由页面

<template>
  <div style="height: 100%">
    
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">router-view>
    keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive" />
  div>
template>
1
2
3
4
5
6
7
8
9
10

在route.js页面设置

 *  keepAlive: 此组件需要被缓存
 *  isBack: 用于判断上一个页面是哪个
1
2

  TestPage1: {
    path: '/TestPage1',
    name: 'TestPage1',
    component: TestPage1,
    meta: {
      keepAlive: true, //此组件需要被缓存
      isBack: false //用于判断上一个页面是哪个
    }
  },
  TestPage2: {
    path: '/TestPage2',
    name: 'TestPage2',
    component: TestPage2,
    meta: {
      keepAlive: false, //此组件需要被缓存
      isBack: false //用于判断上一个页面是哪个
    }
  },
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在缓存页面

  beforeRouteEnter(to, from, next) {
    if (from.name === 'TestPage2') { // 从TestPage2来的要缓存
      to.meta.isBack = true
    } else {
      to.meta.isBack = false
    }
    next()
  },
1
2
3
4
5
6
7
8

第一次进入：beforeRouterEnter ->created ->…->activated->…->deactivated

后续再进入时：beforeRouterEnter ->activated ->deactivated

  activated() {
    if (!this.$route.meta.isBack) {
      // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      // 清空表单
    }
    this.$route.meta.isBack = false
  },
1
2
3
4
5
6
7