iview main.js 詳細介紹

import Vue from 'vue';/** 導入vue */ import iView from 'iview';/** 導入iview */ import VueRouter from 'vue-router';/** 導入vue-router */ import { routers, otherRouter, appRouter } from './router';/** 導入路由配置文件 */ import Vuex from 'vuex';/** 導入vuex */ import Util from './libs/util';/** 工具類 */ import App from './app.vue';/** App.vue組件 */ import Cookies from 'js-cookie';/** 導入js-Cookies */ import 'iview/dist/styles/iview.css';/** 導入 iview樣式 */ import VueI18n from 'vue-i18n';/** 導入VueI18n */ import Locales from './locale';/** 國際化 多語言配置 */ import zhLocale from 'iview/src/locale/lang/zh-CN';/** 導入語言包 中文簡體 */ import enLocale from 'iview/src/locale/lang/en-US';/** 導入語言包 英文 */ import zhTLocale from 'iview/src/locale/lang/zh-TW';/** 導入語言包 中文繁體 */ Vue.use(VueRouter);/** 注冊 VueRouter */ Vue.use(Vuex);/** 注冊 Vuex */ Vue.use(VueI18n);/** 注冊 VueI18n */ Vue.use(iView);/** 注冊iView */ // 自動設置語言 const navLang = navigator.language;/** 返回瀏覽器應用程序的語言代碼。 但是不是所有瀏覽器都能返回，有坑下次再看 */ const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;/** 判斷瀏覽器語言是 zh-CN 或者 en-US，如果都不是返回 false； const localLang: false | "zh-CN" | "en-US" */ const lang = window.localStorage.lang || localLang || 'zh-CN';/** 從瀏覽器獲取 localStorage 中 lang ，如果沒有就使用 localLang 的 值 或者 默認值 */ Vue.config.lang = lang; /** 將lang 語言配置到vue的配置中 */ // 多語言配置 const locales = Locales;/** 國際化 多語言配置 */ const mergeZH = Object.assign(zhLocale, locales['zh-CN']); /** Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。這里是合並對象 參考網站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign */ const mergeEN = Object.assign(enLocale, locales['en-US']); const mergeTW = Object.assign(zhTLocale, locales['zh-TW']); Vue.locale('zh-CN', mergeZH);/** 通過 locale 將 語言包注冊到vue中去，這塊沒有找到資料，一臉懵逼。。。 */ Vue.locale('en-US', mergeEN); Vue.locale('zh-TW', mergeTW); // 路由配置 const RouterConfig = { // mode: 'history', routes: routers }; const router = new VueRouter(RouterConfig);/** 實例化一個vue router */ /** 全局鈎子 導航守衛 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); }); router.afterEach((to, from, next) => { console.log(to.path); }); 每個鈎子方法接收三個參數： to: Route : 即將要進入的目標 [路由對象] from: Route : 當前導航正要離開的路由 next: Function : 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。 next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是confirmed （確認的）。 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。 確保要調用 next方法，否則鈎子就不會被 resolved。 */ router.beforeEach((to, from, next) => { /** router.beforeEach 在路由切換開始時調用 */ iView.LoadingBar.start();/** LoadingBar 加載進度條 iView.LoadingBar.start(); 開始從 0 顯示進度條，並自動加載進度; LoadingBar 只會在全局創建一個，因此在任何位置調用的方法都會控制這同一個組件。主要使用場景是路由切換和Ajax，因為這兩者都不能拿到精確的進度，LoadingBar 會模擬進度，當然也可以通過update()方法來傳入一個精確的進度，比如在文件上傳時會很有用，具體見API。 */ Util.title(to.meta.title);/** 使用工具類，修改網站titie */ /** * 判斷當前是否是鎖屏狀態 locking : 0:未鎖屏 1：鎖屏狀態 * 並且前往的頁面是鎖屏地頁面 */ if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判斷當前是否是鎖定狀態 next(false);/** next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。 */ /** 不留歷史記錄調到 鎖屏界面 */ router.replace({ name: 'locking' }); } else if (Cookies.get('locking') === '0' && to.name === 'locking') { /** 如果現在是 未鎖屏 裝態 並且 要去的界面是 鎖屏路由 */ next(false);/** 中斷當前的導航，返回到原來的界面 */ } else { if (!Cookies.get('user') && to.name !== 'login') { // 判斷是否已經登錄且前往的頁面不是登錄頁 next({ name: 'login' }); } else if (Cookies.get('user') && to.name === 'login') { // 判斷是否已經登錄且前往的是登錄頁 Util.title(); next({ name: 'home_index' }); } else { /** * otherRouter：作為Main組件的子頁面展示但是不在左側菜單顯示的路由寫在otherRouter里 * appRouter： 作為Main組件的子頁面展示並且在左側菜單顯示的路由寫在appRouter里 * getRouterObjByName：在路由列表中匹配 to.name 的路由，並且返回匹配到的路由對象 * access： 權限 */ if (Util.getRouterObjByName([otherRouter, ...appRouter], to.name).access !== undefined) { // 判斷用戶是否有權限訪問當前頁 if (Util.getRouterObjByName([otherRouter, ...appRouter], to.name).access === parseInt(Cookies.get('access'))) { // if 權限 和 cookie 中的相同 Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); // 如果在地址欄輸入的是一級菜單則默認打開其第一個二級菜單的頁面 } else { router.replace({ name: 'error_401' }); next(); } } else { Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); } } } iView.LoadingBar.finish();/** LoadingBar 加載進度條 iView.LoadingBar.finish(); 結束進度條，自動補全剩余進度 */ }); /** * 全局后置鈎子 * 你也可以注冊全局后置鈎子，然而和守衛不同的是，這些鈎子不會接受 next 函數也不會改變導航本身： * 路由執行完后 * 1、 結束進度條 * 2、頁面返回頂部 * */ router.afterEach(() => { iView.LoadingBar.finish();/** LoadingBar 加載進度條 iView.LoadingBar.finish(); 結束進度條，自動補全剩余進度 */ window.scrollTo(0, 0);/** scrollTo() 方法可把內容滾動到指定的坐標。 */ }); // 狀態管理 const store = new Vuex.Store({ state: { /** * 路由數據 * otherRouter：作為Main組件的子頁面展示但是不在左側菜單顯示的路由寫在otherRouter里 * appRouter： 作為Main組件的子頁面展示並且在左側菜單顯示的路由寫在appRouter里 */ routers: [ otherRouter, ...appRouter ], menuList: [], tagsList: [...otherRouter.children], /** 作為Main組件的子頁面展示但是不在左側菜單顯示的路由 */ /** tags 上的表現數據，會存在 local storage */ pageOpenedList: [{ title: '首頁', path: '', name: 'home_index' }], /** tags 上 當前選中的標簽 */ currentPageName: '', /** tags 上 當前選中的地址 */ currentPath: [ { title: '首頁', path: '', name: 'home_index' } ], // 面包屑數組 openedSubmenuArr: [], // 要展開的菜單數組 menuTheme: '', // 主題 theme: '', cachePage: [],/** 緩存頁面 name 列表 */ lang: '', isFullScreen: false, dontCache: ['text-editor'] // 在這里定義你不想要緩存的頁面的name屬性值(參見路由配置router.js) }, getters: { }, mutations: { /** * *設置 不在左側菜單顯示的路由 * @param { '狀態' } state * @param { '作為Main組件的子頁面展示但是不在左側菜單顯示的路由' } list */ setTagsList (state, list) { state.tagsList.push(...list); }, /** * 將 關閉的 頁面 從 state.cachePage 中刪除 * @param {*} state * @param {*} name */ closePage (state, name) { state.cachePage.forEach((item, index) => { /** forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。 */ if (item === name) { state.cachePage.splice(index, 1);/** splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。 index 規定添加/刪除項目的位置， 1 刪除的長度 */ } }); }, increateTag (state, tagObj) { if (!Util.oneOf(tagObj.name, state.dontCache)) {/** tagObj 對象 是否 存在於 dontCache（不緩存的列表） */ state.cachePage.push(tagObj.name);/** 追加到 緩存頁面 name 列表 */ localStorage.cachePage = JSON.stringify(state.cachePage);/** 將 state.cachePage 緩存到 localStorage.cachePage */ } state.pageOpenedList.push(tagObj); }, initCachepage (state) { if (localStorage.cachePage) { state.cachePage = JSON.parse(localStorage.cachePage); } }, /** 移除tag */ removeTag (state, name) { state.pageOpenedList.map((item, index) => { if (item.name === name) { state.pageOpenedList.splice(index, 1); } }); }, pageOpenedList (state, get) { let openedPage = state.pageOpenedList[get.index]; if (get.argu) { openedPage.argu = get.argu; } if (get.query) { openedPage.query = get.query; } state.pageOpenedList.splice(get.index, 1, openedPage);/** 刪除 位於 get.index 的 元素，並用 opendPage 替換*/ localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList); }, clearAllTags (state) { state.pageOpenedList.splice(1); router.push({ name: 'home_index' }); state.cachePage.length = 0; localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList); }, clearOtherTags (state, vm) { let currentName = vm.$route.name; let currentIndex = 0; state.pageOpenedList.forEach((item, index) => { if (item.name === currentName) { currentIndex = index; } }); if (currentIndex === 0) { state.pageOpenedList.splice(1); } else { state.pageOpenedList.splice(currentIndex + 1); state.pageOpenedList.splice(1, currentIndex - 1); } let newCachepage = state.cachePage.filter(item => { return item === currentName; }); state.cachePage = newCachepage; localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList); }, setOpenedList (state) { state.pageOpenedList = localStorage.pageOpenedList ? JSON.parse(localStorage.pageOpenedList) : [otherRouter.children[0]]; }, setCurrentPath (state, pathArr) { state.currentPath = pathArr; }, setCurrentPageName (state, name) { state.currentPageName = name; }, addOpenSubmenu (state, name) { let hasThisName = false; let isEmpty = false; if (name.length === 0) { isEmpty = true; } if (state.openedSubmenuArr.indexOf(name) > -1) { hasThisName = true; } if (!hasThisName && !isEmpty) { state.openedSubmenuArr.push(name); } }, clearOpenedSubmenu (state) { state.openedSubmenuArr.length = 0; }, changeMenuTheme (state, theme) { state.menuTheme = theme; }, changeMainTheme (state, mainTheme) { state.theme = mainTheme; }, lock (state) { Cookies.set('locking', '1'); }, unlock (state) { Cookies.set('locking', '0'); }, /** 設置菜單列表 */ setMenuList (state, menulist) { state.menuList = menulist; }, // 權限菜單過濾相關 updateMenulist (state) { let accessCode = parseInt(Cookies.get('access')); let menuList = []; appRouter.forEach((item, index) => { if (item.access !== undefined) { if (Util.showThisRoute(item.access, accessCode)) { if (item.children.length === 1) { menuList.push(item); } else { let len = menuList.push(item); let childrenArr = []; childrenArr = item.children.filter(child => { if (child.access !== undefined) { if (child.access === accessCode) { return child; } } else { return child; } }); menuList[len - 1].children = childrenArr; } } } else { if (item.children.length === 1) { menuList.push(item); } else { let len = menuList.push(item); let childrenArr = []; childrenArr = item.children.filter(child => { if (child.access !== undefined) { if (Util.showThisRoute(child.access, accessCode)) { return child; } } else { return child; } }); let handledItem = JSON.parse(JSON.stringify(menuList[len - 1])); handledItem.children = childrenArr; menuList.splice(len - 1, 1, handledItem); } } }); state.menuList = menuList; }, setAvator (state, path) { localStorage.avatorImgPath = path; }, switchLang (state, lang) { state.lang = lang; Vue.config.lang = lang; }, handleFullScreen (state) { let main = document.body; if (state.isFullScreen) { /** * 退出全屏 */ if (document.exitFullscreen) { document.exitFullscreen();/** Document.exitFullscreen() 方法用於讓當前文檔退出全屏模式（原文表述不准確，詳見備注）。 */ } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { /** * 進入全屏 */ if (main.requestFullscreen) { main.requestFullscreen(); } else if (main.mozRequestFullScreen) { main.mozRequestFullScreen(); } else if (main.webkitRequestFullScreen) { main.webkitRequestFullScreen(); } else if (main.msRequestFullscreen) { main.msRequestFullscreen(); } } }, changeFullScreenState (state) { state.isFullScreen = !state.isFullScreen; } }, actions: { } }); new Vue({ el: '#app', router: router, store: store, render: h => h(App), data: { currentPageName: '' }, mounted () { this.currentPageName = this.$route.name; this.$store.commit('initCachepage'); // 權限菜單過濾相關 this.$store.commit('updateMenulist'); // 全屏相關 document.addEventListener('fullscreenchange', () => { this.$store.commit('changeFullScreenState'); }); document.addEventListener('mozfullscreenchange', () => { this.$store.commit('changeFullScreenState'); }); document.addEventListener('webkitfullscreenchange', () => { this.$store.commit('changeFullScreenState'); }); document.addEventListener('msfullscreenchange', () => { this.$store.commit('changeFullScreenState'); }); }, created () { let tagsList = []; appRouter.map((item) => { if (item.children.length <= 1) { tagsList.push(item.children[0]); } else { tagsList.push(...item.children); } }); this.$store.commit('setTagsList', tagsList);//設置 不在左側菜單顯示的路由 } });