Vue-router的API詳解

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/10/03/7616682.html
-Advertisement-
Play Games

[1]router-link [2]router-view [3]路由信息對象 [4]Router構造配置 [5]Router實例 [6]對組件註入 ...


前面的話

　　本文將詳細介紹Vue-router的API

 

router-link

　　<router-link> 組件支持用戶在具有路由功能的應用中點擊導航。 通過 to 屬性指定目標地址，預設渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名

　　<router-link> 比起寫死的 <a href="..."> 會好一些。無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動；在 HTML5 history 模式下，router-link 會攔截點擊事件，讓瀏覽器不再重新載入頁面；在 HTML5 history 模式下使用 base 選項之後，所有的 to 屬性都不需要寫基路徑了

【props】

to(required)

類型 string | Location

　　表示目標路由的鏈接。當被點擊後，內部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字元串或者是描述目標位置的對象

  <!-- 字元串 -->
  <router-link to="home">Home</router-link>
  <!-- 渲染結果 -->
  <a href="home">Home</a>

  <!-- 使用 v-bind 的 JS 表達式 -->
  <router-link v-bind:to="'home'">Home</router-link>

  <!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
  <router-link :to="'home'">Home</router-link>

  <!-- 同上 -->
  <router-link :to="{ path: 'home' }">Home</router-link>

  <!-- 命名的路由 -->
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

  <!-- 帶查詢參數，下麵的結果為 /register?plan=private -->
  <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

類型: boolean
預設值: false

　　設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，於是導航後不會留下 history 記錄

<router-link :to="{ path: '/abc'}" replace></router-link>

append

類型: boolean
預設值: false

　　設置 append 屬性後，則在當前（相對）路徑前添加基路徑。例如，從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

類型: string
預設值: "a"

　　有時想要 <router-link> 渲染成某種標簽，例如 <li>。 於是使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航

  <router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染結果 -->
  <li>foo</li>

active-class

類型: string
預設值: "router-link-active"

　　設置鏈接激活時使用的 CSS 類名。預設值可以通過路由的構造選項 linkActiveClass 來全局配置

exact

類型: boolean
預設值: false

　　是否激活預設類名的依據是 inclusive match （全包含匹配）。 舉個例子，如果當前的路徑是 /a 開頭的，那麼 <router-link to="/a"> 也會被設置 CSS 類名

　　按照這個規則，<router-link to="/"> 將會點亮各個路由。想要鏈接使用 "exact 匹配模式"，則使用 exact 屬性

  <!-- 這個鏈接只會在地址為 / 的時候被激活 -->
  <router-link to="/" exact>

events

類型: string | Array<string>
預設值: 'click'

　　聲明可以用來觸發導航的事件。可以是一個字元串或是一個包含字元串的數組

【將"激活時的CSS類名"應用在外層元素】

　　有時候要讓 "激活時的CSS類名" 應用在外層元素，而不是 <a> 標簽本身，那麼可以用 <router-link> 渲染外層元素，包裹著內層的原生 <a> 標簽：

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

　　在這種情況下，<a> 將作為真實的鏈接（它會獲得正確的 href 的），而 "激活時的CSS類名" 則設置到外層的 <li>

 

router-view

　　<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還可以內嵌自己的 <router-view>，根據嵌套路徑，渲染嵌套組件

【屬性】

name

類型: string
預設值: "default"

　　如果 <router-view>設置了名稱，則會渲染對應的路由配置中 components 下的相應組件

【行為表現】

　　其他屬性（非 router-view 使用的屬性）都直接傳給渲染的組件， 很多時候，每個路由的數據都是包含在路由參數中。

　　因為它也是個組件，所以可以配合 <transition> 和 <keep-alive> 使用。如果兩個結合一起用，要確保在內層使用 <keep-alive>：

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

 

路由信息對象

　　一個 route object（路由信息對象） 表示當前激活的路由的狀態信息，包含了當前 URL 解析得到的信息，還有 URL 匹配到的 route records（路由記錄）

　　route object 是 immutable（不可變） 的，每次成功的導航後都會產生一個新的對象。route object 出現在多個地方，包括如下

　　1、組件內的 this.$route 和 $route watcher 回調（監測變化處理）

　　2、router.match(location) 的返回值

　　3、導航鉤子的參數

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息對象
})

　　4、scrollBehavior 方法的參數

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 都是 路由信息對象
  }
})

【屬性】

$route.path

類型: string

　　字元串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"

$route.params

類型: Object

　　一個 key/value 對象，包含了 動態片段 和 全匹配片段，如果沒有路由參數，就是一個空對象

$route.query

類型: Object

　　一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user = 1，如果沒有查詢參數，則是個空對象

$rout.hash

類型: string

　　當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字元串

$route.fullPath

類型: string

　　完成解析後的 URL，包含查詢參數和 hash 的完整路徑

$route.matched

類型: Array<RouteRecord>

　　一個數組，包含當前路由的所有嵌套路徑片段的 路由記錄 。路由記錄就是 routes 配置數組中的對象副本（還有在 children 數組）

const router = new VueRouter({
  routes: [
    // 下麵的對象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 這也是個 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

　　當 URL 為 /foo/bar，$route.matched 將會是一個包含從上到下的所有對象（副本）

$route.name

　　當前路由的名稱，如果有的話

 

Router構造配置

【routes】

類型: Array<RouteConfig>

　　RouteConfig 的類型定義：

declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string; // for named routes (命名路由)
  components?: { [name: string]: Component }; // for named views (命名視圖組件)
  redirect?: string | Location | Function;
  alias?: string | Array<string>;
  children?: Array<RouteConfig>; // for nested routes (嵌套路由)
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;
}

【mode】

類型: string
預設值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)
可選值: "hash" | "history" | "abstract"

　　配置路由模式

　　1、hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器

　　2、history: 依賴 HTML5 History API 和伺服器配置

　　3、abstract: 支持所有 JavaScript 運行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式

【base】

類型: string
預設值: "/"

　　應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然後 base 就應該設為 "/app/"

【linkActiveClass】

類型: string
預設值: "router-link-active"

　　全局配置 <router-link> 的預設『激活 class 類名』

【scrollBehavior】

類型: Function

　　簽名：

(
  to: Route,
  from: Route,
  savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}

 

Router實例

【屬性】

router.app

類型: Vue instance

　　配置了 router 的 Vue 根實例

router.mode

類型: string

　　路由使用的 模式

router.currentRoute

類型: Route

　　當前路由對應的路由信息對象

【方法】

router.beforeEach(guard)
router.beforeResolve(guard) (2.5.0+): 此時非同步組件已經載入完成
router.afterEach(hook):增加全局的導航鉤子
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
router.back()
router.forward():動態的導航到一個新 url
router.getMatchedComponents(location?)
返回目標位置或是當前路由匹配的組件數組（是數組的定義/構造類，不是實例）。通常在服務端渲染的數據預載入時
router.resolve(location, current?, append?)
解析目標位置（格式和 <router-link> 的 to prop 一樣），返回包含如下屬性的對象
{
　　location:Location;
　　route:Route;
　　href:string;
}
router.addRoutes(routes) 
動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組
router.onReady(callback)
添加一個會在第一次路由跳轉完成時被調用的回調函數。此方法通常用於等待非同步的導航鉤子完成，比如在進行服務端渲染的時候

 

對組件註入

【註入的屬性】

　　通過在 Vue 根實例的 router 配置傳入 router 實例，下麵這些屬性成員會被註入到每個子組件

$router

　　router 實例

$route

　　當前激活的路由信息對象。這個屬性是只讀的，裡面的屬性是 immutable（不可變） 的，不過可以 watch（監測變化） 它

【允許的額外配置】

beforeRouteEnter
beforeRouteLeave

 


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

-Advertisement-
Play Games
更多相關文章
  • 文字溢出時，實現在末尾顯示三個點省略效果
    有時我們會有這樣的需求：當文本內容較多，寬度超出父容器時，就在最後顯示三個點，代表還有東西被摺疊起來了。如下圖 具體實現 HTML 如下 div 樣式如下 簡單加了個邊框，然後居中方便截圖，然後給了個寬度，作為文本寬度的限制 p 的樣式如下 第 2 行表示強制在一行顯示，如果不強制在一行顯示，超出容 ...
  • HTTP庫Axios
    [1]概述 [2]使用 [3]API [4]實例方法 [5]響應結構 [6]配置預設值 [7]攔截器 [8]錯誤處理 [9]取消 ...
  • SpringMvc文件上傳和下載
    1、首先導入jar包: 2、然後,在applicatinContext.xml中添加上傳和下載的配置文件,如下: 3、好了,最基礎的配置就好了,接下來jsp頁面:upload.jsp 4、Controller中對應的java代碼: 這樣就可以把網頁上選擇的圖片上傳上去了. 下載成功了! 5、文件下載 ...
  • 用JQuery寫出登錄彈出框
    類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為html5 代碼： 小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以 放在<ol>和<ul>中，方便對齊格式；在 ...
  • echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
    一：錯誤描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二：錯誤原因：echarts在用json數據請求時未調用 數據請求格式： 三：解決辦法： （1）將上述代碼放在一個函數中，然後在onload中調用這個函數 （ ...
  • 實戰系列之 Node.js 玩轉 Java
    這些年以來，Node.js的興起，JavaScript已經從當年的“世界最被誤解的語言”變成了“世界最流行的語言”。且其發展之勢，從語言本身的進化，庫和包的增長，工具支持的完善，star項目和領域解決方案的涌現，平臺、技術棧、應用領域的擴張等諸方面來看，都是前所未見的。隨著Node.js服務的普及， ...
  • Vue狀態管理vuex
    [1]引入 [2]概述 [3]開始 [4]state [5]getter [6]mutation [7]action [8]module [9]項目結構 [10]插件 [11]嚴格模式 [12]表單處理 [13]測試 [14]熱載入 ...
  • Vuex的API文檔
    前面的話 本文將詳細介紹Vuex的API文檔 概述 【構造器選項】 state Vuex store 實例的根 state 對象 mutations 在 store 上註冊 mutation，處理函數總是接受 state 作為第一個參數（如果定義在模塊中，則為模塊的局部狀態），payload 作為第 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類