day-106-one-hundred-and-six-20230706-vue路由導(dǎo)航守衛(wèi)相關(guān)-物美后臺(tái)管理系統(tǒng)

vue路由導(dǎo)航守衛(wèi)相關(guān)

常見(jiàn)面試題

• 面試題：介紹一下 vue-router 中的導(dǎo)航守衛(wèi)函數(shù)
• 面試題：介紹一下你對(duì)vue-router的理解？

導(dǎo)航守衛(wèi)函數(shù)

• 面試題：介紹一下 vue-router 中的導(dǎo)航守衛(wèi)函數(shù)
  • 在每一次路由切換的時(shí)候，首先把路由匹配、導(dǎo)航確認(rèn)等事宜先處理好-在此期間會(huì)觸發(fā)一系列的鉤子函數(shù)，這些函數(shù)就是路由導(dǎo)航守衛(wèi)函數(shù)。然后再讓組件銷(xiāo)毀或者渲染-也就是再觸發(fā)組件的相應(yīng)鉤子函數(shù)！
  • 導(dǎo)航守衛(wèi)函數(shù)分為三類(lèi)：全局守衛(wèi)、路由守衛(wèi)、組件內(nèi)守衛(wèi)，每一次路由切換的時(shí)候，其執(zhí)行的大概順序：
    1. 觸發(fā)失活組件的beforeRouteLeave。
    2. 觸發(fā)全局前置守衛(wèi) beforeEach。
    3. 在匹配的路由表選項(xiàng)中，觸發(fā)路由獨(dú)享守衛(wèi) beforeEnter。
    4. 觸發(fā)激活組件的 beforeRouteEnter。
    5. 觸發(fā)全局解析守衛(wèi) beforeResolve。
    6. 觸發(fā)全局后置守衛(wèi) afterEach。
    • 此后再觸發(fā)組件的相應(yīng)鉤子函數(shù)：先觸發(fā)激活組件的beforeCreath/created/beforeMount，然后觸發(fā)失活組件的beforeDestroy/destroyed，最后觸發(fā)激活組件的mounted！
  • 在每一個(gè)導(dǎo)航守衛(wèi)函數(shù)中，都有三個(gè)參數(shù)：to目標(biāo)路由的信息、from來(lái)源路由的信息、next執(zhí)行下一步的方法（afterEach中沒(méi)有next）；而且next函數(shù)必須執(zhí)行，否則將無(wú)法進(jìn)入下一步；也可以基于next跳轉(zhuǎn)到指定的路由地址（例如：在之前做登錄態(tài)校驗(yàn)的時(shí)候，如果沒(méi)有登錄，基于next直接讓其進(jìn)入登錄頁(yè)）！
  • 而在我之前的項(xiàng)目開(kāi)發(fā)中，常用的導(dǎo)航守衛(wèi)函數(shù)就兩個(gè)：
    • beforeEach 全局前置守衛(wèi)。
      • 在這里，我處理過(guò)登錄校驗(yàn)、權(quán)限校驗(yàn)、以及開(kāi)啟Loading等待效果等相關(guān)操作。
    • afterEach 全局后置守衛(wèi)。
      • 在這里，我處理過(guò)設(shè)置頁(yè)面的title、關(guān)閉Loading效果等。
  • 而且之前項(xiàng)目中，在路由切換的時(shí)候，會(huì)基于內(nèi)置的<keep-alive>組件，對(duì)部分組件進(jìn)行緩存！被<keep-alive>緩存的組件，其beforeDestroy/destroyed鉤子函數(shù)，在路由切換的時(shí)候?qū)⒉辉儆|發(fā)-組件沒(méi)有銷(xiāo)毀，只是把相關(guān)信息緩存起來(lái)了，即便再切回到這個(gè)組件，也不會(huì)執(zhí)行第一次渲染的相關(guān)邏輯了-只是把之前緩存的信息，拿出來(lái)渲染呈現(xiàn)即可！但是是否緩存組件，和導(dǎo)航守衛(wèi)函數(shù)沒(méi)有關(guān)系，只和組件是否應(yīng)該被銷(xiāo)毀有關(guān)系！
    • 被緩存的組件，在路由切換，其被失活的被激活的時(shí)候，會(huì)觸發(fā)組件內(nèi)的兩個(gè)鉤子函數(shù)。
      • activated 被激活。
      • deactivated 被失活。
  • 在真實(shí)項(xiàng)目中，我們往往就是基于這一系列的鉤子函數(shù)，去實(shí)現(xiàn)我們要做的需求！

導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)與原生鉤子函數(shù)

keep-alive組件與導(dǎo)航守衛(wèi)

keep-alive組件與組件生命周期函數(shù)

對(duì)vue-router的理解

• 面試題：介紹一下你對(duì)vue-router的理解？
  • 之前我們公司做的所有項(xiàng)目，基本上都是SPA單頁(yè)面應(yīng)用的，所以vue-router每個(gè)項(xiàng)目中都有應(yīng)用，它主要就是基于前端路由機(jī)制，來(lái)管理單頁(yè)面應(yīng)用！
  • 在使用vue-router的時(shí)候，首先要指定路由的模式，例如：哈希路由和History路由，我們之前用的都是哈希路由！
  • 然后真正寫(xiě)代碼的時(shí)候，主頁(yè)就是：Vue.use(VueRouter)、new VueRouter()、以及把創(chuàng)建出來(lái)的router掛載到根組件的配置項(xiàng)中；我之前大概看過(guò)這部分源碼，只有這幾步操作完畢，每一個(gè)組件才會(huì)具備$router/$route屬性，才可以使用<RouterView>/<RouterLink>這兩個(gè)全局組件。
  • 當(dāng)然這些東西都是基礎(chǔ)語(yǔ)法，沒(méi)有什么難度。比較消耗精力的，還是如何根據(jù)業(yè)務(wù)需求，進(jìn)行路由的劃分，比如：那些是一級(jí)，那些是二級(jí)/三級(jí)等！
    1. 路由層級(jí)不能太深。
    2. 頁(yè)面視圖中，有通用部分的為上級(jí)路由，變化較大的為下級(jí)路由。
    • 我之前劃分的時(shí)候，基本上都是本著：層級(jí)不宜過(guò)深、按照有通用部分等劃分原則去處理的！
    • 值得注意的是：在編寫(xiě)路由表的時(shí)候，一定要做路由懶加載！
  • 剩下的基本上就是在組件中，基于<router-link>或者編程式導(dǎo)航實(shí)現(xiàn)路由的跳轉(zhuǎn)，以及跳轉(zhuǎn)中基于各種手段進(jìn)行傳參，比如：?jiǎn)柼?hào)傳參、隱式傳參、路徑參數(shù)等！
  • 而在真正的開(kāi)發(fā)中，還會(huì)使用路由的導(dǎo)航守衛(wèi)函數(shù)（比如：beforeEach/afterEach）做一些處理；基于addRoute實(shí)現(xiàn)動(dòng)態(tài)路由管理；基于<KeepAlive>對(duì)某些組件做緩存，防止路由切換時(shí)組件銷(xiāo)毀等等！
  • 總而言之，vue-router很也很重要，但是也不難；在vue-router@4版本后，其語(yǔ)法和vue-router@3版本，主要就是：
    • 取消VueRouter類(lèi)，基于createRouter來(lái)創(chuàng)建路由管理機(jī)制。
    • 基于createWebHashHistory/createWebHistory函數(shù)來(lái)指定路由的模式。
    • 組件中基于useRouter/useRoot等Hook函數(shù)來(lái)獲取router和route對(duì)象。
    • …
    • 主要就是配合Vue3，全面使用函數(shù)式編程，其它的和之前版本使用起來(lái)差不多！

面試時(shí)

• 最好先寫(xiě)一劇本：
• 如個(gè)人信息介紹：寫(xiě)一遍，讀幾遍，背下來(lái)。對(duì)大概的問(wèn)題也進(jìn)行回答的準(zhǔn)備。
• 到Vue：先說(shuō)總結(jié)-引出vuex及vue-router等。
  • 并準(zhǔn)備對(duì)應(yīng)的大概的vuex及vue-router步驟。
    • 同時(shí)由vue-router也準(zhǔn)備一些原理及細(xì)節(jié)：
      • hash路由及history路由的原理。
      • 同時(shí)由vue-router的初步配置及源碼中關(guān)于Vue.use(VueRouter)、new VueRouter()的理解。
      • 路由統(tǒng)一管理–>路由表–>單個(gè)路由配置–>路由的懶加載。
      • 路由跳轉(zhuǎn)–>路由跳轉(zhuǎn)的傳參–>路由跳轉(zhuǎn)的接收參數(shù)。
      • 路由的導(dǎo)航守衛(wèi)函數(shù)–>導(dǎo)航解析流程–>與原生組件的生命周期相關(guān)。
      • 基于addRoute實(shí)現(xiàn)動(dòng)態(tài)路由管理。
      • 基于<KeepAlive>對(duì)某些組件做緩存。
      • 與vue對(duì)應(yīng)的vue-router@4版本的差別。

物美后臺(tái)管理系統(tǒng)

1. 物美后臺(tái)管理系統(tǒng)

從零開(kāi)始項(xiàng)目

• 從零開(kāi)始，基于Vue2全家桶+ElementUI構(gòu)建一個(gè)管理系統(tǒng)類(lèi)項(xiàng)目。

  • 可以基于開(kāi)源的框架來(lái)處理：
    • Antd Vue Pro。
    • 若依。
    • …
  • 也可以自己來(lái)搭建。

• 自己來(lái)搭建的步驟：

  1. 基于@vue/cli腳手架 創(chuàng)建工程化/組件化項(xiàng)目。
     • 創(chuàng)建項(xiàng)目
     • 修改默認(rèn)的配置項(xiàng)- vue.config.js、babel.config.js、package.json。
       • 基礎(chǔ)配置 - vue.config.js中publicPath、lintOnSave、transpileDependencies、productionSourceMap。
       • devServer - vue.config.js中devServer。
       • 進(jìn)階配置 - vue.config.js中chainWebpack。
       • 瀏覽器兼容 - package.json中"browserslist"、babel.config.js。PC端ToB管理系統(tǒng)，一般不需要處理兼容。
     • 組件庫(kù)的按需導(dǎo)入 - 如果項(xiàng)目較大，需要用到的組件很多，則使用全量導(dǎo)入即可。
     • 安裝項(xiàng)目所需要的一些模塊-在package.json中的：

       • vue全家桶：vue@2 + vuex@3 + vue-vue-router@3。

       • “axios” 發(fā)送ajax請(qǐng)求。也可以使用fetch。

       • 工具類(lèi)庫(kù)：

         • “blueimp-md5” 密碼加密，很多，但這個(gè)星號(hào)比較多。
         • “dayjs” 處理時(shí)間，類(lèi)似的有：moment.js。
         • “l(fā)odash” 工具函數(shù)庫(kù)。在lodash中不具備的或者內(nèi)部實(shí)現(xiàn)不是很好的，我們可以自己封裝一些方法，放在utils.js/tool.js/lib.js…中，是它的補(bǔ)充。

       • 統(tǒng)計(jì)圖表：

         • “echarts” 百度圖表。
         • g2plot react中的圖表的東西。
         • d3js
         • WebGL + three.js 3D可視化。
         • …

       • UI組件庫(kù)

         • element-ui
         • antd of vue@1
         • iview
         • …

       • “vuex-persist” vuex的持久化存儲(chǔ)。

       • “xlsx” 處理Excel表格的上傳、下載、解析等。

       • 富文本編輯器插件：

       • Word/PDF 解析的插件。

       • 開(kāi)發(fā)依賴(lài)：--------------文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-524247.html

         • “babel-plugin-component” 組件庫(kù)的按需導(dǎo)入，配合import。
         • …
  2. 搭建項(xiàng)目通用的架子
     1. api接口的統(tǒng)一管理。
        • /src/api/http.js 對(duì)axios的二次配置，把請(qǐng)求中通用的部分進(jìn)行提取封裝。
        • /src/api/index.js 統(tǒng)一管理所有發(fā)送請(qǐng)求的方法-按模塊管理。
        • /src/global.js或/src/main.js 把請(qǐng)求放到Vue原型對(duì)象上。
     2. assets公共靜態(tài)資源的準(zhǔn)備。
     3. components 把一些之前封裝好的，本項(xiàng)目中需要使用的公共組件處理好。
        • /src/components 放置自己封裝的。
        • /src/global.js或/src/main.js 把注冊(cè)Vue全局組件上，UI框架的全局導(dǎo)入或按需導(dǎo)入。
     4. 配置vuex的基礎(chǔ)骨架。
     5. 配置vue-router的基礎(chǔ)骨架
        • 規(guī)劃出路由該如何劃分
        • 在views中把需要用到的組件，都先創(chuàng)建好。相關(guān)結(jié)構(gòu)、樣式、功能都先不寫(xiě)。
        • 開(kāi)始構(gòu)建路由的骨架。
          • /src/router/index.js
          • /src/router/routes.js
          • /src/router/childRoutes.js
        • 在指定的位置放上<router-view>
     6. 全局通用的樣式 App.vue
        • …
  3. 劃分任務(wù)，開(kāi)始逐頁(yè)面/逐組件開(kāi)發(fā)-最重要的事情：一定要具備組件抽離封裝的能力和意識(shí)。
  4. 前后端聯(lián)調(diào)-調(diào)用后臺(tái)接口地址，實(shí)現(xiàn)數(shù)據(jù)通信。
  5. 自測(cè)-自己測(cè)試。
  6. 提測(cè)-交給測(cè)試人員處理。
     • 先打包。
     • 把打包的內(nèi)容部署到測(cè)試服務(wù)器。
     • 測(cè)試反饋問(wèn)題，開(kāi)發(fā)解決問(wèn)題，繼續(xù)提測(cè)。
     • …
  7. 上線
     • 先打包
     • 部署到正式的服務(wù)器
     • 公測(cè)
  8. 后續(xù)需求就是第3、4、5、6、7步開(kāi)始。

路由劃分

主頁(yè)的展開(kāi)折疊

看項(xiàng)目

1. 一般是先看路由表，及路由的一些渲染。
2. 路由表中可以看到一級(jí)路由，看一些頁(yè)面是否需要權(quán)限才能進(jìn)入。
3. 再看頁(yè)面中的<router-view>的位置。

驗(yàn)證碼

1. 扒接口，大概清楚那個(gè)字段是什么。一般一個(gè)是img的base64編碼；一個(gè)uuid用于讓后端判斷驗(yàn)證是否正確；一個(gè)是code讓前端判斷請(qǐng)求是否正確可完成。
2. 之后在需要用到驗(yàn)證碼的接口時(shí)，把用戶(hù)輸入的驗(yàn)證碼及uuid發(fā)送到服務(wù)器。

登錄流程

• 具體步驟：
  1. 進(jìn)行表單校驗(yàn)。用于忽略無(wú)效請(qǐng)求，以及SQL注入。
     1. 定義表單相關(guān)狀態(tài)。
     2. 給表單元素v-model的值綁定相關(guān)狀態(tài)。
     3. 把我們收集到的狀態(tài)，通過(guò)model屬性通知el-form表單最新的值。
     4. 通過(guò)prop屬性給el-form-item設(shè)置狀態(tài)名。
     5. 定義狀態(tài)的規(guī)則。
     6. 通過(guò)rules屬性通知el-form表單校驗(yàn)規(guī)則。
     7. 在某些時(shí)機(jī)時(shí)，觸發(fā)校驗(yàn)。校驗(yàn)通過(guò)就可以進(jìn)入下一步。
     • 看最后一個(gè)視頻。
  2. 處理接口要求的參數(shù)及參數(shù)格式。
  3. 把數(shù)據(jù)通過(guò)接口發(fā)送到服務(wù)器上。
• 說(shuō)明：
  • 在做任何的表單提交的時(shí)候「把用戶(hù)輸入的信息傳遞給服務(wù)器」，都需要做表單格式校驗(yàn)??！
    • 防止無(wú)效的請(qǐng)求
    • 防止SQL注入/XSS攻擊
    • …
  • 表單校驗(yàn)：對(duì)用戶(hù)輸入的內(nèi)容做格式校驗(yàn)。
    • 自己手動(dòng)做，主要思想：獲取表單信息、基于正則做匹配校驗(yàn)。
    • 只不過(guò)項(xiàng)目中，我們都會(huì)基于 組件庫(kù) 自帶的表單校驗(yàn)體系來(lái)處理。
      • UI組件庫(kù)的校驗(yàn)體系步驟：
        1. 基于提供的組件搭建表單結(jié)構(gòu)。
        2. 基于組件庫(kù)內(nèi)置的校驗(yàn)規(guī)則進(jìn)行表單校驗(yàn)。
           • 自帶的規(guī)則，例如：驗(yàn)證非空、驗(yàn)證類(lèi)型、驗(yàn)證長(zhǎng)度…
           • 用戶(hù)自定義規(guī)則。
             • 使用正則。
             • 使用函數(shù)。
        3. 觸發(fā)校驗(yàn)規(guī)則。
           • 隨時(shí)校驗(yàn)：onblur、onchange…
           • 提交校驗(yàn)：
             • 內(nèi)置校驗(yàn)「按鈕在form中，并且nativeType=submit」，成功/失敗觸發(fā)規(guī)定的某些方法。
             • 手動(dòng)校驗(yàn)：獲取form的實(shí)例，基于實(shí)例提供的方法進(jìn)行校驗(yàn)。

進(jìn)階參考

到了這里，關(guān)于20230706----重返學(xué)習(xí)-vue路由導(dǎo)航守衛(wèi)相關(guān)-物美后臺(tái)管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！