Vue Router

来源:https://www.cnblogs.com/codechen8848/archive/2022/11/08/16868488.html
-Advertisement-
Play Games

本文主要記錄 Vue.js 中的 router 管理,涉及如何使用路由實現單頁面應用(SPA)的組件切換,以及路由的一些 API 操作。 ...


1.1 相關理解

1.1.1 vue-router 的理解

Vue 的一個插件庫,專門用來實現 SPA 應用

1.1.2 對 SPA 應用的理解

  1. 單頁 Web 應用(single page web application,SPA)
  2. 整個應用只有一個完整的頁面
  3. 點擊頁面中的導航鏈接不會刷新頁面,只會做頁面的局部更新
  4. 數據需要通過 Ajax 請求獲取

1.1.3 路由的理解

  1. 什麼是路由

    1. 一個路由就是一組映射關係(key-value
      1. key 為路徑, value 可能是 functioncomponent
  2. 路由分類

    1. 後端路由:
      1. 理解:valuefunction , 用於處理客戶端提交的請求
      2. 工作過程:伺服器接收到一個請求時,根據請求路徑找到匹配的函數來處理請求,返迴響應數據

    2.前端路由:

    1. 理解:valuecomponent,用於展示頁面內容
    2. 工作過程:當瀏覽器的路徑改變時,對應的組件就會顯示。

1.2 基本路由

1.2.1 安裝與使用

  1. 安裝 vue-router,命令:npm install vue-router

  2. 應用插件:Vue.use(VueRouter)

  3. 編寫 router 配置項:

    //引入VueRouter
    import VueRouter from 'vue-router'
    //引入Luyou 組件
    import About from '../components/About'
    import Home from '../components/Home'
    
    //創建router實例對象,去管理一組一組的路由規則
    const router = new VueRouter({
        routes:[
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home
            }
        ]
    })
    
    //暴露router
    export default router
    
  4. 實現切換(active-class 可配置高亮樣式)

     <router-link active-class="active" to="/about">About</router-link>
    
  5. 指定展示位置

    <router-view></router-view>
    
  6. 幾個註意點:

    1. 路由組件通常存放在 pages 文件夾,一般組件通常存放在 components 文件夾
    2. 通過切換,“隱藏”了的路由組件,預設是被銷毀掉的,需要的時候再去掛載
    3. 每個組件都有自己的 $route 屬性,裡面存儲著自己的路由信息
    4. 整個應用只有一個 router,可以通過組件的 $router 屬性獲取到

1.2.2 總結

編寫使用路由的 3 步

  1. 定義路由組件
  2. 註冊路由
  3. 使用路由

1.3 嵌套(多級)路由

  1. 配置路由規則,使用 children 配置項:

    routes:[
       	{
       		path:'/about',
       		component:About,
       	},
       	{
       		path:'/home',
       		component:Home,
       		children:[ //通過children配置子級路由
       			{
       				path:'news', //此處一定不要寫:/news
       				component:News
       			},
       			{
       				path:'message',//此處一定不要寫:/message
       				component:Message
       			}
       		]
       	}
       ]
    
  2. 跳轉(要寫完整路徑):

    <router-link to="/home/news">News</router-link>
    

1.4 路由傳參

1.4.1 路由的 query 參數

  1. 傳遞參數

    <!-- 跳轉並攜帶query參數,to的字元串寫法 -->
    <router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>
    				
    <!-- 跳轉並攜帶query參數,to的對象寫法 -->
    <router-link 
    	:to="{
    		path:'/home/message/detail',
    		query:{
    		   id:666,
                title:'你好'
    		}
    	}"
    >跳轉</router-link>
    
  2. 接收參數:

    $route.query.id
    $route.query.title
    

1.4.2 命名路由

  1. 作用:可以簡化路由的跳轉。

  2. 如何使用

    1. 給路由命名:

      {
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                          name:'hello' //給路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }
      
    2. 簡化跳轉:

      <!--簡化前,需要寫完整的路徑 -->
      <router-link to="/demo/test/welcome">跳轉</router-link>
      
      <!--簡化後,直接通過名字跳轉 -->
      <router-link :to="{name:'hello'}">跳轉</router-link>
      
      <!--簡化寫法配合傳遞參數 -->
      <router-link 
      	:to="{
      		name:'hello',
      		query:{
      		   id:666,
                  title:'你好'
      		}
      	}"
      >跳轉</router-link>
      

1.4.3 路由的 params 參數

  1. 配置路由,聲明接收 params 參數

    {
    	path:'/home',
    	component:Home,
    	children:[
    		{
    			path:'news',
    			component:News
    		},
    		{
    			component:Message,
    			children:[
    				{
    					name:'xiangqing',
    					path:'detail/:id/:title', //使用占位符聲明接收params參數
    					component:Detail
    				}
    			]
    		}
    	]
    }
    
  2. 傳遞參數

    <!-- 跳轉並攜帶params參數,to的字元串寫法 -->
    <router-link :to="/home/message/detail/666/你好">跳轉</router-link>
    				
    <!-- 跳轉並攜帶params參數,to的對象寫法 -->
    <router-link 
    	:to="{
    		name:'xiangqing',
    		params:{
    		   id:666,
                title:'你好'
    		}
    	}"
    >跳轉</router-link>
    

    特別註意:路由攜帶 params 參數時,若使用 to 的對象寫法,則不能使用 path 配置項,必須使用 name 配置!

  3. 接收參數:

    $route.params.id
    $route.params.title
    

1.4.4 路由的 props 配置

作用:讓路由組件更方便的收到參數

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一種寫法:props值為對象,該對象中所有的key-value的組合最終都會通過props傳給Detail組件
	// props:{a:900}

	//第二種寫法:props值為布爾值,布爾值為true,則把路由收到的所有params參數通過props傳給Detail組件
	// props:true
	
	//第三種寫法:props值為函數,該函數返回的對象中每一組key-value都會通過props傳給Detail組件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}
  1. 作用:控制路由跳轉時操作瀏覽器歷史記錄的模式
  2. 瀏覽器的歷史記錄有兩種寫入方式:分別為 pushreplacepush 是追加歷史記錄,replace 是替換當前記錄。路由跳轉時候預設為 push
  3. 如何開啟 replace 模式: <router-link replace .......>News</router-link>

1.5 編程式路由導航

  1. this.$router.push(path): 相當於點擊路由鏈接(可以返回到當前路由界面)
  2. this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)
  3. this.$router.back(): 請求(返回)上一個記錄路由
  4. this.$router.go(-1): 請求(返回)上一個記錄路由
  5. this.$router.go( 1 ): 請求下一個記錄路由

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

-Advertisement-
Play Games
更多相關文章
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
  • 函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...
  • 1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式; CSS2.0 ...
  • 虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。 為什麼使用虛擬DOM? 用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。 比如說,在一次操作中,需要更新10個DOM節點。 理想是一次性構建完成DOM樹,但是瀏覽器並不會 ...
  • 一、事件委派 1.理解DOM事件流 事件流描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即DOM事件流。 DOM事件流分為三個階段: 捕獲階段:從上往下 當前目標階段 冒泡階段:從下往上 事件流如下圖所示: 註意事項: JavaScript代碼中只能執行捕 ...
  • 一.商品列表 1.1 獲取數據 首先能夠進入商品列表的途徑 傳的數據有 瞭解了這個之後就可以開始了,先創建分支 創建編譯模式,並分配初試數據 這個時候就可以獲取數據了 需要的數據 所以在發起請求之前需要整理一下數據,先定義數據 整理數據發起請求 1.2 渲染頁面 ==註意我們可以去定義一個預設的圖片 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...