Vue中使用keepAlive不緩存問題（已解決）

1.查看app.vue文件，這個是重點，不能忘記加（我就是忘記加了keep-alive）

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

2.查看router.js

      {
        path:'/loanmessage',
        component:loanmessage,
        name:'loanmessage',
        meta: {
          keepAlive: true,  //代表需要緩存
          isBack: false,
        },

　　

3.在需要緩存的頁面加入如下代碼

  beforeRouteEnter(to, from, next) {
    if (from.name == 'creditInformation' || from.name == 'cityList') {
      to.meta.isBack = true;
    }
    next();
  },
  activated() {
    this.getData()
    this.$route.meta.isBack = false
    this.isFirstEnter = false

  },

附上鈎子函數執行順序：

• 不使用keep-alive
  beforeRouteEnter --> created --> mounted --> destroyed

• 使用keep-alive
  beforeRouteEnter --> created --> mounted --> activated --> deactivated
  再次進入緩存的頁面，只會觸發beforeRouteEnter -->activated --> deactivated 。created和mounted不會再執行。

於此文記之！！！