keep-alive

<keep-alive  include="FileList">
     <router-view></router-view>
</keep-alive>

    {
       path: ‘Loading‘,//等待页面
       component: Loading,
       meta: {
         requireAuth: true, // requireAuth属性作用是表明该路由是否需要登录验证，在进行全局拦截时，我们将通过该属性判断路由的跳转，该属性包含在meta属性中:
         keepAlive: false, //此组件不需要被缓存false 需要缓存为true
   }

<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((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();
  }
})