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
  • MQTTnet 是一個高性能的MQTT類庫,支持.NET Core和.NET Framework。 MQTTnet 原理: MQTTnet 是一個用於.NET的高性能MQTT類庫,實現了MQTT協議的各個層級,包括連接、會話、發佈/訂閱、QoS(服務質量)等。其原理涉及以下關鍵概念: MqttCli ...
  • 在WPF中,源屬性(Source Property)指的是提供數據的屬性,通常是數據模型或者其他控制項的屬性,而目標屬性(Target Property)則是數據綁定的目標,通常是綁定到控制項的屬性,例如TextBlock的Text屬性。數據綁定將源屬性的值自動更新到目標屬性中。 主要包含以下幾個事件: ...
  • async/await 是 C# 中非同步編程的關鍵特性,它使得非同步代碼編寫更為簡單和直觀。下麵深入詳細描述了 async/await 的使用場景、優點以及一些高級使用方法,並提供了相應的實例源代碼。 使用場景: I/O 操作: 非同步編程特別適用於涉及 I/O 操作(如文件讀寫、網路請求等)的場景。在 ...
  • 使用過office的visio軟體畫圖的小伙伴都知道,畫圖軟體分為兩部分,左側圖形庫,存放各種圖標,右側是一個畫布,將左側圖形庫的圖標控制項拖拽到右側畫布,就會生成一個新的控制項,並且可以自由拖動。那如何在WPF程式中,實現類似的功能呢?今天就以一個簡單的小例子,簡述如何在WPF中實現控制項的拖拽和拖動,... ...
  • 1、Blazor Hybrid簡介 Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中,Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控制項。 組件不在瀏覽器 ...
  • 除了內置的數據集,scikit-learn還提供了隨機樣本的生成器。通過這些生成器函數,可以生成具有特定特性和分佈的隨機數據集,以幫助進行機器學習演算法的研究、測試和比較。 目前,scikit-learn庫(v1.3.0版)中有20個不同的生成樣本的函數。本篇重點介紹其中幾個具有代表性的函數。 1. ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------002實現通過文件對話框,選擇合適的文件夾,自定義預設的圖片保存位置,簡單易學 ...
  • 每次談到容器的時候,除了Docker之外,都會說起 Kubernetes,那麼什麼是 Kubernetes呢?今天就來一起學快速入門一下 Kubernetes 吧!希望本文對您有所幫助。 Kubernetes,一種用於管理和自動化雲中容器化工作負載的工具。 想象一下你有一個管弦樂隊,將每個音樂家視為 ...
  • 目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件(CSS,JS等)丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行,- 為了方便截圖乾凈,實現最小化程式到托盤運行,簡潔,勿擾,實現最小化程式到托盤運行, 實現托盤菜單功能,實現回顯主窗體, 實現托盤開始截屏, 實現氣泡信息提示,實現托盤程式提示,實現托盤退出程式, 封裝完... ...