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
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...