转自

利用 <router-view></router-view> 标签页面缓存

在App.vue 中来判断各个组件是否缓存

<div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <!--这里是其他的代码-->
  </div>

2.在配置路由 router.js 中来控制某个组件是否需要缓存

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{keepAlive: true} // 这个组件需要缓存 true
    },{
      path:'/eleme',
      component:Eleme,
      meta:{keepAlive: false} // 这个组件不需要缓存false(不写默认不缓存)
    }
  ]
})