vue 路由傳參

 

mode:路由的形式 用的哪一種路由

一、hash 路由 會帶#號的哈希值 默認是hash路由

 

二、history路由 不會帶#的

 

 

單頁面開發首屏加載慢怎麼解決？單頁面開發首屏加載白屏怎麼解決？

 

一、路由的懶加載

異步組件 (resolve)=>require(["組件的路徑"],resolve);

ES6的import ()=>import("組件的路徑");

 

 

二、ssr渲染 服務端渲染 nuxt

 

 

路由經常使用的配置項

path:路由請求的路徑

component:路徑匹配成功後須要渲染的組件或者頁面

redirect:重定向

children:路由嵌套

name:命名路由 給當前路由取一個別名

props:路由解耦 路由傳參的一種方式 針對動態路由

meta:路由元信息 當前路由所攜帶的一些信息

 

 

 

路由跳轉的方式：

 

一、<a href="#/home"></a>

 

二、<router-link to="/home"></router-link>

 

to的路徑會與path進行匹配，若是匹配成功會渲染component對應的組件

 

組件怎樣才能在頁面上進行展現 必須依賴一個內置組件

<router-view></router-view> 展現路徑匹配成功之後相對應的組件

 

三、編程式導航

 

 

 

 

路由嵌套

children是一個數組 數組裏面存放對象 每個對象都是下一級的路由的配置項 配置項的屬性與routes裏面的屬性同樣

 

路由傳參：

 

路由的傳參接收方式統一在this.$route裏面

 

 

動態路由傳值

在路由的配置項path中，設定傳遞參數的屬性 方式爲 /:屬性.....

在路由跳轉的屬性中 設置屬性的值 方式爲 /detail/0/蘋果

 

接收：this.$route.params

 

query傳值

query傳值?後面的參數 &進行連接 /user?name=zhangsan&age=18

 

 

傳值的方式：經過?進行數據的拼接 每一個字段之間用&分隔 相似與get請求的方式

接收:this.$route.query

 

 

區別:query傳值是非必須傳值 動態路由傳值是必需要傳值

 

 

 

 

 

路由鉤子函數 路由守衛

 

beforRouteEnter 路由進入以前

一、熱力圖

二、登錄驗證

三、權限驗證

四、會員 VIP驗證

五、驗證商品攜帶信息是否完整

 

在當前鉤子函數中是訪問不到this的，由於尚未進入當前組件因此this爲undefined

若是須要使用this則須要在next中使用回調,回調中的第一個參數就是組件的實例

 

 

beforRouteUpdate 路由更新的時候

當路由發生了改變，可是當前組件沒有經歷建立和銷燬的時候，若是咱們須要接收路由傳遞過來的數據時

咱們就須要用到了beforRouteUpdate

 

 

 

 

beforRouteLeave 路由離開的時候

一、信息沒有填寫完成

二、答題系統

三、支付

四、退出登錄

 

 

全局守衛 全局鉤子函數

 

beforEach 通常狀況下用來作一些路由公衆部分的驗證 登錄驗證

 

 

 

 

 

編程式導航

用js來實現路由的跳轉

 

this.$router.push() 跳轉

this.$router.go()

this.$router.back();返回

this.$router.forward()前進

this.$router.replace()替換