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
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...