VUE（keep-alive） 返回上一页 不刷新页面

关于页面不刷新keep-alive 在vue中的使用方式

关于keep-alive

vue使用了keep-alive之后，vue组件会缓存数据，只构建一次，就是只走一遍钩子函数（created、mounted），之后就不会再走钩子函数了，但可以走激活activated(只有设置了keep-alive此函数才有效)函数更新数据。

方法一（页面只刷新一次，任何页面跳转到这个页面都不刷新）

直接在你的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 xxx form 'xxx'//等等类似组件
 
Vue.use(Router)
 
export default new Router({
  mode: 'hash',//history
  routes: [
    {
      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 效果
 
  //进入登录页面的时候清除 token
  if(to.path === '/login' ){
    sessionStorage.removeItem("token", '');
    sessionStorage.removeItem("user_Data", '');
  }
 
 
  store.state.token = sessionStorage.getItem('token');//获取本地存储的token
 
  if (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什么的不知道的话，请看我的以前一篇博客传送门。

这里我们就可以愉快的使用之前缓存是数据了。