vue Keep-alive不工作

Question

虽然我设置了keep-alive，但每次我在vue应用程序内容页面刷新时都会使用vue-router。每次进入内容页面时都会调用挂载的钩子和激活的钩子。请原谅我的英语很差。

提前感谢

//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>

//路由器index.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

在view路由器上使用唯一密钥

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

Answer 2

我认为你需要在你的keep-alive元素中添加一个include=“我的组件名，我的下组件名，等等”属性。您还需要对这些组件进行全局命名和注册。然后，您可以从路由中删除元数据，只需让路由通过名称匹配组件：

应用程序的根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 forum: keep-alive not working with vue-router

Child Routes, keep-alive and nested keep-alive destroy considerations