[JavaScript知识库]vue 路由缓存

vue 路由缓存

一般我们会在列表上使用，列表滚动到下面然后跳转详情返回还想继续显示滚动条位置

路由配置：

 { // 列表
      path: '/list',
      name: 'list',
      component: list,
      meta: {
        keepAlive: true,
        title: '商品列表'
      }
    },

app.js监听：

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" ref="indexEvent">
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" ref="indexEvent">
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>
  </div>
</template>

当然我们也可以使用另一种白名单的方式方式，用exclude方法定义白名单。