vue Keep-alive 不起作用

Question

我使用 vue-router 在我的 vue-application 內容頁面刷新，盡管我設置了保持活動狀態，但每次進入內容頁面時都會調用掛載的鈎子和激活的鈎子請原諒我的英語不好
提前致謝

//home.vue
    <div id="home">
        <topnav ref="childMethod"></topnav>
        <div class="mobile_header" ref="mobile_header"><img src="../assets/img/menu.png" @click="nav()"><p>earnest的小站</p></div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <div id="iconfont1" @click="gotop1()" v-show="show" title="回到頂部"></div>
        <myfooter></myfooter>
    </div>


 //app.vue
<div id="app">
        <!-- 不管寫沒寫跟路由都在APP。vue里面？一定要加上這一句 -->
        <loading v-show="isloading"></loading>
            <router-view></router-view>
</div>

//路由器索引.js

const router=new Router({
    mode:'history',
    routes: [
    {
        path: '/',
        redirect:'/content',
        component: home,
        children:[
      //注意這里有逗號
      // 要是hash路由，這里無論點那個路由都是跳轉到content
      {path:'/about', name:'about', component:about,meta:{keepAlive:true}},
      {path:'/archives',name:'archives',component:archives,meta:{keepAlive:true}},
      {path:'/content',name:'content',component:content,meta:{keepAlive:true}},
      {path:'/article:_id',name:'article',component:article,meta:{keepAlive:true}}//這里的name是命名路由里面的參數name
      ]
  }

Answer 1

在視圖路由器上使用唯一鍵

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

Answer 2

我認為您需要在 keep-alive 元素中添加一個 include="mycomponentname,mynextcomponetname,etc" 屬性。 您還需要全局命名和注冊這些組件。 然后你可以從路由中刪除元數據，讓路由按名稱匹配組件：

您的應用程序的根 vue 文件：

<template>
  <div id="app">
    <main role="main">
      <keep-alive include="somecomponent">
        <router-view class="view"></router-view>
      </keep-alive>
    </main>
  </div>
</template>

<script>    
  include SomeComponent from "../path/to/some-component"
  Vue.component("some-component", SomeComponent)
</script>

有關組件名稱匹配的更多詳細信息，請查看此處：

vue 論壇：keep-alive 不適用於 vue-router

子路由、keep-alive 和嵌套 keep-alive 銷毀注意事項