网上有很多种方法，刚开始看的时候都感觉莫名奇妙。不知道他们说啥，理解能力有限，我梳理了一下。
这里我介绍的主要是两种缓存某个页面的方法fang
方法一（页面只刷新一次，任何页面跳转到这个页面都不刷新）
直接在你的router-view 标签外面包一个keep-alive 加include="组件名称"
<keep-alive include="FileList"><router-view></router-view></keep-alive>
这时候匹配到的组件就会值加在一次。这个就比较简单，但能使用性不广。
方法二（keep-alive与vue-router配合使用）
配置路由的时候需要加 keepAlive: true 参数 （我把代码完整贴出来，有点长）
import Vue from 'vue'import Router from 'vue-router'import Login from '@/components/Login/Login'import Regist from '@/components/Login/Regist'import P404 from '@/components/404/404'import Loading from '@/components/404/Loading'import Main from '@/components/Main'import User from '@/components/Basic/User' //用户import Role from '@/components/Basic/Role' //角色import Department from '@/components/Basic/Department' //部门import RPermissions from '@/components/Basic/RPermissions' //角色权限设置import DPermissions from '@/components/Basic/DPermissions' //部门权限设置import RoleList from '@/components/Basic/RoleList' //角色成员列表import DeparmentList from '@/components/Basic/DeparmentList' //部门成员列表import LogLogin from '@/components/Basic/LogLogin' //登录日志import LogOperation from '@/components/Basic/LogOperation' //操作日志import LogFile from '@/components/Basic/LogFile' //文件日志import Class from '@/components/Basic/Class' //文件日志import SetFile from '@/components/Basic/SetFile' //文件上传import FileAudit from '@/components/Basic/FileAudit' //文件审核import FileList from '@/components/Basic/FileList' //文件列表import FileView from '@/components/Basic/FileView' //文件预览Vue.use(Router)export default new Router({mode: 'hash',//historyroutes: [{path: '/login',//登录页name: 'Login',component: Login},{path: '/regist',//注册页name: 'Regist',component: Regist},{path: '/',//首页name: 'Main',component: Main,redirect: '/Loading',//默认子路由meta: {requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的keepAlive: false, //此组件不需要被缓存},children: [{path: 'user',//用户管理component: User,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'role',//角色管理component: Role,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'department',//部门component: Department,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'rpermissions',//角色权限设置component: RPermissions,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'dpermissions',//部门权限设置component: DPermissions,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'rolelist',//角色成员列表component: RoleList,meta: {requireAuth: true,},},{path: 'deparmentList',//部门成员列表component: DeparmentList,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'loglogin',//登录日志component: LogLogin,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'logoperation',//操作日志component: LogOperation,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'logfile',//文件日志component: LogFile,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'class',//文件分类component: Class,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'setfile',//文件上传component: SetFile,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'fileaudit',//文件审核component: FileAudit,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'filelist',//文件列表component: FileList,meta: {requireAuth: true,keepAlive: true, // 此组件需要被缓存},},{path: 'fileview',//文件预览component: FileView,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},},{path: 'Loading',//等待页面component: Loading,meta: {requireAuth: true,keepAlive: false, //此组件不需要被缓存},}]},{ path: '*', component: P404 }]})
配置入口文件
<keep-alive><router-view v-if="$route.meta.keepAlive"><!-- 这里是会被缓存的视图组件，比如 Home！ --></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view><!-- 这里是不被缓存的视图组件，比如 Edit！ -->
之后在router.beforeEach 方法里面来动态修改 keepAlive 的值 （我的是这个代码是放在main.js里面的，这个就随你高兴了）
router.beforeEach((to, from, next) => {iView.LoadingBar.start();//loadong 效果//进入登录页面的时候清除 tokenif(to.path === '/login' ){sessionStorage.removeItem("token", '');sessionStorage.removeItem("user_Data", '');}store.state.token = sessionStorage.getItem('token');//获取本地存储的tokenif (to.meta.requireAuth) { // 判断该路由是否需要登录权限if (store.state.token !== "" && store.state.token !== null) { // 通过vuex state获取当前的token是否存在//判断是否需要缓存if(to.path === '/filelist' && from.path === '/fileview'){to.meta.keepAlive = true; // 让 列表页 缓存，即不刷新next();}else {to.meta.keepAlive = false; // 让 列表页 即不缓存，刷新next();}}else {next({path: '/login',query: {redirect: from.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由})}}else {next();}})
我这里只判断 to.path === '/filelist' && from.path === '/fileview' (翻译从文一下这个代码，本路径是fileview，要跳转的路径是filelist，也就是从fileviewlu路径跳转到filelist，不刷新filelist页面）表页的时候缓存，外面的那些token什么的不知道的话，请看我的以前一篇博客传送门。
这里我们就可以愉快的使用之前缓存是数据了。
