vue - Vue路由（擴展）

来源:https://www.cnblogs.com/heymar/archive/2022/05/15/16274413.html
-Advertisement-
Play Games

忙裡偷閑，還在學校，趁機把後面的路由多出來的知識點學完 十.緩存路由組件 讓不展示的路由組件保持掛載，不被銷毀 在我們的前面案例有一個問題，都知道vue的路由當我們切換一個路由後，另一個路由就會被銷毀，如果我在一個路由寫了有一些input框 當我切換到另一個組件message很明顯這個時候news里 ...


忙裡偷閑，還在學校，趁機把後面的路由多出來的知識點學完

十.緩存路由組件

讓不展示的路由組件保持掛載，不被銷毀

在我們的前面案例有一個問題，都知道vue的路由當我們切換一個路由後，另一個路由就會被銷毀，如果我在一個路由寫了有一些input框

image-20220514194518515

當我切換到另一個組件message很明顯這個時候news裡面的內容就會丟失，畢竟都被銷毀了，以前說過的專門用來保存舊dom的$el這些都會被銷毀，而再掛載的時候沒有可以復用的就會直接生成新的DOM，所以當我們切換回來就是一個全新的input框

那麼有沒有辦法能夠解決這個問題，畢竟類似於這樣的情況，大多數都是能夠記住input裡面的內容切換回來也還是這樣

用到一個全新的標簽將我們的 input所在的組件的router-view標簽加入到裡面去

image-20220514230254633

註意這裡面可以寫一個屬性include，不寫的話就預設所有這裡展現的路由組件都會緩存，但是沒得這個必要，其他組件沒有input，也不需要緩存的話，可以加include屬性值為 那個組件的name既可以專門緩存這一個組件的內容

image-20220514230722648

image-20220514230733022

緩存多個路由組件，將include動態綁定，然後寫一個數組的形式

image-20220514232135960

十一.兩個新的生命周期鉤子

像我們上面的案例接著來，如果我添加了一個news組件裡面的內容，讓他的opacity動態變化

image-20220514233611212

這個時候你會發現，就算你切走了，還是在輸出，因為根本沒有銷毀，一直掛載起的，這個時候這樣一直掛載起又有點沒有必要了，因為我都看不到那邊的情況，就算你幫我緩存數據，我也看不到，更沒必要一直給我開啟定時器

兩個全新的而且只有路由能用的鉤子：一個是 activated 當前這個路由組件被激活時被調用的生命周期鉤子，一個是deactivated是路由組件失活時被調用，所以這個時候調用這兩個鉤子比mounted和brforeDestroy要好得多

image-20220515101841393

十二.路由守衛

1.全局前置路由守衛

添加一個需求，前面的案例當我切換home和about正常切換，但是切換home裡面的message和news的時候需要許可權，也就是好像一個守衛一樣守著這個關卡認證不對不會給你放行。

比如我在localStorage放入一個user，只有當user為admin的時候才可以點擊news和message

image-20220515102359322

全局體現在哪，體現在我是對整個router進行的設置。

這個守衛需要放在router，所以在配置文件裡面不能直接導出，前置體現在哪？一個路由的方法 .beforeEach,意思是在每一次切換之前，她在兩種情況下調用，一個是每一次切換之前，一個是初始化的時候，註意是切換之前，也就是剛好點擊切換但是還沒切換過去這一個節點，他會接受三個參數，to是你點擊要去的路由組件，from是你來自於哪個組件，還有一個next也是必須要寫的，所有的點擊切換路由組件，都會被這個守衛攔截到，如果不寫next的話，就不會給你放行所以就實現不了切換

image-20220515102953812

既然拿到了這些參數，那就可以做一些判斷了，只有當我們想要訪問news或者message才會去繼續判斷你的user是否是admin，如果都滿足才會執行next，如果不是切換的這兩個組件，該放行的就放行

image-20220515104026527

但是這樣寫也不好，就像那個path地址，雖然也可以寫 to.name，但是如果要十多個路由組件都需要鑒權呢？在我們每一個$route裡面有一個屬性 meta它是一個對象，叫做路由元信息，他就是專門用來存放一些我們自定義的數據的，我們可以把需要鑒權的路由組件都添加一個這個配置項，統一為isAuth值為true，我們守衛判斷的時候判斷這個是否為true就可以了

image-20220515104754896

image-20220515104910465

2.全局後置路由守衛

它的觸發事件首先也是初始化的時候，還有一個就是切換完後進行觸發。

因為都已經切換完了，也沒什麼事情可以做了，所以這個守衛一般用的也比較少，有一種情況需要用到這個守衛，就是當我們單擊了一個路由組件後，我們的網頁標題會出現一些與之相關的title，需要在每一個路由組件的meta路由元信息添加各自的標題

image-20220515110303153

如果用前置來做也可以做，點擊誰顯示誰的title，如果有就顯示，但是根目錄沒有用異或語法顯示後一個

image-20220515110617523

但是這樣還是有一個bug，就是初試化才進來的時候還是有一瞬間顯示的是你index定義的title，所以為了徹底應該在index把title改了

image-20220515110751277

但是用前置做就很麻煩，為了不出現bug還要寫兩次，而路由就很簡單了，直接 afterEach，並且它的參數 只有兩個to，from，因為都已經切換完了也不需要繼續放心做什麼了，他就只需要在裡面寫上我們換標題的語句，因為所有的驗證都已經在前置路由守衛做完了，到後置了說明已經過鑒權了，直接換就可以了

image-20220515111138719

3.獨享路由守衛

顧名思義就是一個路由組件獨享的路由守衛，怎麼來觸發，除了初始化之後，就是當我切換進設置的這個路由組件之前，配置在這個路由配置項裡面 beforeEnter ,他也跟前置守衛一樣有三個參數

image-20220515112620274

可以跟全局後置配合換title，但是要註意獨享路由守衛沒有 後置

4.組件內路由守衛

顧名思義寫在組件裡面的路由守衛，就不寫在router配置文件裡面了。

分別是 beforeRouteEnter通過觸發規則進入該組件被觸發 beforeRouteLeave通過路由規則離開這個路由守衛時觸發，為什麼一定是通過路由規則，只有當router匹配的完成的切換才會被觸發，如果是當一般組件直接導入使用組件標簽的這種組件不會被觸發，當你想單獨對這個路由組件來點業務邏輯可以在這裡，跟獨享路由守衛一樣的，但是區別於前值和後置，而且改名還是要配合全局後置才能完成

image-20220515142033525

十三.history與hash模式

  • 區別一： 也就是我們瀏覽器上的的路徑，hash是帶#的，history不帶#要好看一點

image-20220515144714290

image-20220515144801622

怎麼來切換呢，直接修改router配置文件，一個配置項 mode：為你想要的模式

image-20220515144839931

  • 區別二：history比hash相容性略差

  • 區別三：項目上線問題

    假如我現在用的history模式想要項目上線了，首先要執行run serve build將項目打包，打包好的文件需要伺服器環境才能上線展示創建一個獨立的環境，node初始化，然後導入express，通過express內置中間件static，將我們的項目靜態資源掛載上去

    部署上線後會發現，確實路徑挺好看，正常點也沒問題

    image-20220515150803275

    但是當你刷新後，就會報錯

    image-20220515150823659

    為什麼會找不到這個請求，一般出現這個問題，都是找不到伺服器裡面這個路徑的資源或者一些語法錯誤，這裡的問題就是如果用的history模式，當你刷新的時候就會觸髮網絡請求，去伺服器請求這個路徑的資源，但是伺服器根本沒有這個路徑，所以就會報錯，歸根結底還是因為用的history模式錯把後面的路徑當成了請求地址

    同樣的操作，我用hash打包來測試，刷新就不會這樣，因為#後面的不會通過http帶給伺服器，就算你刷新發起的網路請求還是根路徑，也就是你靜態托管出來的資源地址

    image-20220515151327346

當然想要用history模式並且能分別出誰是路由匹配的路徑，誰才是真正的伺服器路徑也可以，只是針對於node伺服器，可以下載第三方包：connect-history-api-fallback

然後導入並且一定要在靜態托管之前註冊即可

image-20220515152309349


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • batch批處理筆記
    待持續更新 一、批處理命令 1.命令 使用help命令查看結果集 結果集 1. echo 和 @ 回顯命令 @ #關閉單行回顯 echo off #從下一行開始關閉回顯 @echo off #從本行開始關閉回顯。一般批處理第一行都是這個 echo on #從下一行開始打開回顯 echo #顯示當前是 ...
  • 大數據Hadoop之——任務調度器Azkaban（Azkaban環境部署）
    一、概述 1）什麼是任務調度？ 大數據平臺技術框架支持的開發語言多種多樣，開發人員的背景差異也很大，這就產生出很多不同類型的程式（任務）運行在大數據平臺之上，如：MapReduce、Hive、Pig、Spark、Java、Shell、Python 等。 這些任務需要不同的運行環境，並且除了定時運行， ...
  • MySQL系統安裝與部署
    資料庫版本標準化 1.確認Supported Platforms https://www.mysql.com/support/ 2.確認安裝版本 推薦:5.7.22 ,8.0.20以後的雙數GA版本 3.獲取MySQL軟體包 https://downloads.mysql.com/archives/ ...
  • HDFS High Availability（HA）高可用配置
    高可用性（英語：high availability，縮寫為 HA） IT術語，指系統無中斷地執行其功能的能力，代表系統的可用性程度。是進行系統設計時的準則之一。 高可用性系統意味著系統服務可以更長時間運行，通常通過提高系統的容錯能力來實現。高可用性或者高可靠度的系統不會希望有單點故障造成整體故障的情 ...
  • 百萬數據 mysql count（*）優化
    1.將軟體包kafka_2.12-3.0.0.tgz上傳到/opt/software/目錄下，解壓到/opt/module/目錄下 tar -zxvf kafka_2.12-3.0.0.tgz -C /opt/module/ 2.修改解壓後的文件名稱 mv kafka_2.12-3.0.0/ kaf ...
  • Zookeeper環境搭建
    1.拷貝 apache-zookeeper-3.5.7-bin.tar.gz到/opt/software目錄下 2.解壓到指定目錄 tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz -C /opt/module/ 3.修改名稱 cd /opt/module mv ...
  • 【FAQ】分析服務導出的事件數據和概覽頁面展示的數據不一致該如何解決？
    華為分析服務面向開發者提供兩種數據展現方式：（1）事件數據下載，開發者可以將事件數據下載後導入到自有的分析系統中；（2）直接在AGC概覽頁面查看用戶數和事件數。 問題描述 某開發者想將事件數據導入到自有系統中，他在導出數據時將標識用戶方式選擇“按UserID和設備”，最後發現導出數據中的事件數比分析 ...
  • Angular中懶載入一個模塊並動態創建顯示該模塊下聲明的組件
    不通過路由的情況下, 懶載入一個angular模塊, 並動態創建其中聲明的組件 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類