vue - Vue路由

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

至此基本上vue2.0的內容全部結束,後面還有點elementUI和vue3.0的內容過幾天再來更新。 這幾天要回學校去參加畢業答辯,斷更幾天 一.相關理解 是vue的一個插件庫,專門用來實現spa(單頁面應用)的,也就是一直都是一個index.html頁面,他有他的導航區和展示區,雖然只有一個頁面 ...


至此基本上vue2.0的內容全部結束,後面還有點elementUI和vue3.0的內容過幾天再來更新。
這幾天要回學校去參加畢業答辯,斷更幾天

一.相關理解

是vue的一個插件庫,專門用來實現spa(單頁面應用)的,也就是一直都是一個index.html頁面,他有他的導航區和展示區,雖然只有一個頁面但是我點擊導航區,展示區會出來不同內容,頁面也不會刷新也不會發生跳轉,照樣可以實現豐富的頁面展現

image-20220511112413613

在前端裡面的路由,我們的路徑就好比key值,value值就是我們的組件,vuerouter檢測到你的key為這個就會幫你去呈現對應的value

image-20220511112822197

前端路由是組件,後端路由是函數(參考前面node.js)

image-20220511113140819

二.基本路由

先完成一個簡單的靜態頁面搭建

image-20220511114520881

導航區已就位,下麵就是分組件,把我們展示區的內容放到組件裡面去

要註意的是,app裡面只是把展示區的內容占位,其他地方不要動

image-20220511115019326

接下來就要發揮路由的作用了,下載導入註冊

image-20220511120441267

然後vm配置項一個全新的配置 router,但是在配置之前需要像vuex一樣先創建一個router文件夾裡面放入我們的index.js文件,來創建一個路由器,專門拿來創建整個網頁的路由器,new出來一個路由器過後,我們說一個路由器是管理著多個路由的,所以多個路由直接來個routes,路由又是由key、value組合的,每個路由都是一個配置項,在裡面寫入鍵值對

image-20220511121023496

這樣才可以回去配置我們的配置項router

image-20220511121107840

當我們配置好後,路徑就會出現一個#

image-20220511121151605

我們原來實現跳轉靠的是一個a標簽,但是要用路由實現跳轉,需要用到一個特定的標簽 router-link,並且我們的href也就是要跳轉的目標也要改為 to,而且裡面的值不是我們的鏈接不是我們的目標網頁,是我們在url地址中的路徑名,所以要記住這裡沒有./因為不是一個文件

image-20220511121627383

而且你會發現使用了這個最終樣式,原來給a寫的樣式還是有,因為我們的router-link在頁面上呈現後就變成了a標簽

這個時候active就不能寫死了,用到一個規定的屬性 active-class,就可以根據我們點的誰active就給誰

image-20220511122126991

最後一步,通過標簽router-view指定我們的展示區標簽放的位置

image-20220511122326122

1.註意點

  • 可以發現我們放在router管理的組件並沒有引入到父組件使用也沒有用組件標簽,而是通過定義了路由匹配規則後,讓他幫我們展現的,一般像這樣的組件 叫做路由組件,而且一般是放在一個pages的文件夾下的,我們的要導入要寫組件標簽的叫做一般組件是放在components裡面的

    image-20220511141025505

  • 當我們點擊一個組件,另一個組件是被銷毀了

image-20220511141217177

  • 每個路由組件多了兩個api,一個是$route,一個是$router,值得註意的是,route是每個vc獨有的裡面的數據是獨有的,但是router是共有的,你配置多少個路由都只有這一個router

    image-20220511141705808

三.嵌套路由

路由裡面再來一個路由

image-20220511141950380

由於是home裡面的嵌套路由,所以要把代碼放到home裡面去再進行拆分

image-20220511143056381

可以看出來再分兩個news和message組件

image-20220511143339207

主要看一下怎麼來配置路由,我們剛纔配的都叫一級路由,如果是路由下的嵌套路由那就是二級路由了,所以應該在這個路由裡面來配置,一個全新的配置項 children而且是一個數組,裡面寫我們的每個路由,這裡要註意 二級路由之後就不用再帶/因為vue幫你解析的時候會給你自動加上

image-20220511144207893

註意二級路由的router-link標簽裡面的to這個設置,需要連同父級地址寫完

image-20220511144453255

四.路由傳參(query)

接著前面的例子,假如我message列表裡面每個數據都是ajax得到的,然後都可以點擊,沒點一個又在下麵呈現一些不同的內容

image-20220511150522536

其實這裡又涉及到嵌套路由了,繼續往每一個message添加路由,點擊這個出現那個,點擊這個出現這個其他都銷毀,其實沒得這麼麻煩,這裡就定義一個組件就可以搞定

創建了下麵的一個組件後,開始定義路由規則,三級路由出現,只定義一個即可

image-20220511151153864

萬事俱備就差傳參

image-20220511151307429

其實這個參數就在我們的$route身上,它上面有一個query專門處理查詢字元串的參數的,為什麼就能確定是傳給我的參數?因為當我們點擊了這個之後,他才會呈現他才會有vc實例對象,其他的都被銷毀了,所以在我們detail組件就可以把值拿到

image-20220511152047928

那麼這個值怎麼傳過來?

兩種寫法:字元串寫法

image-20220511152820804

對象寫法

image-20220511153317885

五.命名路由

可以簡化路由的跳轉

在我們定義路由的地方給路由取名字,我給我下麵的三級路由來個name

image-20220511153837429

我們以前寫了這麼大一串的路徑,可以直接寫name配置項,值為剛纔寫的name,只能寫在對象寫法裡面

image-20220511154006811

六.路由傳參(params)

如果要使用動態傳參,首先要對路由對於路徑的監測機製做修改

image-20220511154631101

然後我們在接受參數這裡也要改為params

image-20220511154708296

最後最大的改變就是我們傳進來參數的形式不再是查詢字元串了,而是這種類似於在後面還有路徑的形式,但是這並不是路徑只是參數

image-20220511154849755

當然對象形式也是可以的,註意:如果帶的是params參數,這裡只能寫name路徑,不能寫path路徑

image-20220511155003370

七.路由的props配置

跟我們組件的props一樣也有三種寫法

  • 方法一:寫在路由中的對象,路由中的全新配置項props,這裡傳的值就是直接給這個路由的組件

    image-20220511155852533

    對應的detail組件通過props來接受

    image-20220511155959228

    但是這種方法使用極少,因為只能傳死數據

  • 方法二:寫為一個布爾值,他的意思就是會把這個路由組件收到的所有params參數以props形式給到這個組件

    image-20220511160359388

    image-20220511160444402

    局限性就是只支持params

  • 方法三:為一個函數,參數可以拿到$route,靠的就是這個返回值

    image-20220511160948498

八.router-link的replace屬性

我們瀏覽器對於歷史記錄的保存是存在一個棧裡面,然後router-link的的操作模式就是push模式,就是一直往棧裡面壓,也叫壓棧,所以當我們當一次後退,指針就會回退一次也就是那個箭頭

image-20220511161749995

我們router-link預設開啟的就是push模式,我們還有一種模式叫做replace模式,就是點擊一次前一次記錄就被銷毀了,所以一直存起的就這一次

image-20220511162018757

如何開啟replace

直接給router-link標簽寫一個屬性replace

image-20220511162434467

這裡有一個易錯點,加入我給news和message開啟了replace,其他都是push當我依次點擊About、Home、news和message,主要是replace和push交叉哪一步,當我們點擊news時,會幹掉前面這一條記錄,所以我們的home這條記錄就沒得了,點擊後退直接回到about這一步

image-20220511162932334

九.編程式路由導航

這個技術是拿來彌補router-link的短缺,因為她在頁面上去了最終呈現的是一個a標簽,那萬一我要實現跳轉的不是a標簽是其他標簽呢?

我們的router-link是幫我們實現跳轉的功能也就是導航區這一片功能

要實現這個功能需要用到我們$router路由器上面的一個api push

image-20220511164614458

裡面寫的是一個對象,很幸運的是,這裡的配置項跟我們的to的對象形式是一樣的,拿下來就沒有參數了,記得傳參

image-20220511164919982

1.按鈕實現前進後退

window上面有,但是我們這裡要用路由實現,$router下麵有兩個api一個是back,一個是forward

image-20220511165751780

這上面還有一個api go,要傳入一個數組如果是正數,就表示前進n部,負數表示後退n步


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

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,非常 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 信息爆發時代,有效率有質量地整理視頻、音頻、文字等信息變得尤為重要。會議、講座、採訪、客服電話等場景均需要形成完整的文字記錄材料,音視頻文件也要配有字幕。語音轉文字的智能化,讓信息錄入即時高效。 在直播類、會議類、筆記類的應用中都具備實時語音轉寫功能。例如,在音視頻會議中,可以將發言內容可視化,即時 ...
  • 本期 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)開發者故事,我們特別採訪了 2 月代碼最佳貢獻者、一位接觸 OpenHarmony 1 年左右,2022 年初便完成高難度開發項目的開發者——潤和軟體資深軟體開發工程師趙海鵬。 ...
  • 前言 【內容】 jQuery菜鳥編程學習筆記 具體詳情看目錄 【目的】 記錄本人在jQuery學習中的筆記 方便日後的工作與學習。 【學習資料】 jQuery教程-菜鳥教程 【溫馨提示】 筆記中有些個人理解後整理的筆記,可能有所偏差,也懇請讀者幫忙指出,謝謝。 jQuery快速瞭解 啥是jQuery ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...