vueRouter keep-alive 无效

Question

main.js

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    //重定向页面
    {
      path: '/',
      redirect: '/homePage',
    },
    {
      path: '/homePage',
      name: 'homePage',
      meta: {title: '首页'},
      component: (resolve) => require(['../views/homePage.vue'], resolve),
    },
    {
      path: '/about',
      name: 'about',
      meta: {title: '关于'},
      component: (resolve) => require(['../views/about.vue'], resolve),
    },

})

这样写 keep-alive 不生效 但是新建一个项目相同的写法就会缓存 网上的方法重新下载node_modules方法也没效果

Answer 1

项目结构不一样，但是据我今天解决的结果，不应该在

 <div id="app">
  <keep-alive>
    <router-view/>
  </keep-alive>
</div>

这个地方加keep-alive，我认为这边路由只是个入口。
我在项目具体界面入口的router-alive外配置keep-alive，实测有效。

<template>
   <el-container>
     <el-header>
     </el-header>
     <el-main>
       <keep-alive
         <router-view></router-view>
       </keep-alive>
     </el-main>
   </el-container>
</template>