VUE 返回上一頁 不刷新頁面

網上有很多種方法，剛開始看的時候都感覺莫名奇妙。不知道他們說啥，理解能力有限，我梳理了一下。

這裏我介紹的主要是兩種緩存某個頁面的方法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',//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什麼的不知道的話，請看我的以前一篇博客傳送門。

這裏我們就可以愉快的使用之前緩存是數據了。