vue之keep-alive

在home首页

<template>
  <div>
    首页
    <router-link to="/list">跳转列表</router-link>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped></style>

商品列表

<template>
  <div>
    列表
    <router-link to="/detail">跳转详情</router-link><br />
    <router-link to="/home">跳转首页</router-link>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '默认的数据',
    };
  },
  created() {
    console.log('created装状态');

    
  },
  methods: {
    getNewData(a) {
      this.msg = a;
    },
  },

  beforeRouteEnter: (to, from, next) => {
    if (from.name === 'detail') {
      to.meta.isBack = true;
      to.meta.keepAlive = true;
    }
    next();
  },
  activated() {
    console.log('激活状态');

    if (!this.$route.meta.isBack) {
      this.getNewData('主页进入的新数据');
    }
    this.$route.meta.isBack = false;
  },
};
</script>
<style lang="less" scoped></style>

商品详情

<template>
  <div>
    详情
    <router-link to="/list">跳转列表</router-link><br />
    <router-link to="/home">跳转首页</router-link>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped></style>

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/home.vue';
import Detail from '../components/detail.vue';
import List from '../components/list.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/home',
    meta: {
      keepAlive: false,
    },
  },
  {
    path: '/home',
    component: Home,
    name: 'home',
    meta: {
      keepAlive: false,
    },
  },
  {
    path: '/list',
    component: List,
    name: 'list',

    meta: {
      keepAlive: true,
      isBack: false,
    },
  },
  {
    path: '/detail',
    component: Detail,
    name: 'detail',
  },
];

const router = new VueRouter({
  routes,
});

export default router;

总结：首次从首页进入列表页面先created再activated，之后任何页面进入到list页面后created都不会执行 只会执行activated，所以需要在activated进行获取新数据