路由的使用

給路由起個名字，這樣可以方便我們在使用路由的時候，簡寫路徑

給出了一級檢視以外的其他檢視起名字，這樣可以區分不同級別的路由使用不同級別的檢視

--vue cli3 配置反向**
---在根目錄下新建乙個vue.config.js
vue.config.js中可以預設直接使用
module.exports =},
'/siku':}
}}

- 我們發現凡是使用了路由的元件，我們統稱為：路由元件 - 路由元件身上會自動新增乙個 $route的資料 - id: this .$route.params.id - query: this

.$route.query.***

-push
-this
.$router.
push
('/home')-
this
.$router.
push()
- push可以將我們的操作存放到瀏覽器的歷史記錄
-replace:
-this
.$router.
replace
('/home')-
this
.$router.
replace()
- replace沒有將我們的操作存放到瀏覽器的歷史記錄， 效果為返回了二級

–導航守衛（路由守衛）：

1.作用：

- 進 : 舉例：攜帶資料進 -出：

舉例：事情完成才能出

2.導航守衛一共有三種形式

a :全域性導航守衛： 1.**全域性前置守衛** `router.beforeeach(fn)` 1. fn中有三個引數 2.全域性的解析守衛 1. 在 2.5 .0+ 你可以用 router.beforeresolve 註冊乙個全域性守衛。這和 router.beforeeach 類似，區別是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。 2. 必須保證整個專案的守衛和非同步路由元件解析完成 3.全域性的後置守衛可以做一些使用者友好提示 b：路由獨享守衛 1.寫在路由表中的守衛鉤子 2.針對的是和當前路由相關的，那麼其他與之不相關的路由，它是無法監聽它的變化情況的 c：元件內守衛元件內的前置守衛 beforerouteenter ((to, from ,next) => )- 導航進入元件時，呼叫 -this是訪問不到的，如果非要訪問this ,必須通過 next (vm=> )訪問 - 因為元件此時沒有建立，所以沒有this - 案例：資料預載（進入元件前就獲得資料） next (vm => ) 元件內的後置守衛 - 當好離開元件時，呼叫 -this是可以訪問到元件內的更新守衛 -**在當前路由改變，但是該元件被復用時呼叫** - 舉例來說，**對於乙個帶有動態引數的路徑 /foo/ :id，在 /foo/ 1 和 /foo/ 2 之間跳轉的時候，** - 由於會渲染同樣的 foo 元件，因此元件例項會被復用。而這個鉤子就會在這個情況下被呼叫。

- 可以訪問元件例項 this

3.功能：導航守衛可以監聽路由變化情況

4.名詞解釋：

- 前置：要進入當前路由

- 後置：要離開當前路由

5.關於next()的用法：

- next()  等價於  next( true )  表示可以從當前路由跳轉到目標路由
- next( false ) 表示不通過， 表示從當前路由跳轉不到目標路由 
- next('/login') 等價於 next() 跳轉指定的路由
- next('/login') 等價於 next()
- next( fn ) 資料預載

業務：當我們進入到乙個專案的首頁時，但是當我們沒有註冊賬號時，它主動跳轉到了註冊/登入頁

router.
beforeeach
((to,
from
,next)
=>
else
})

總結：

路由導航守衛： -3種型別 7個路由鉤子函式 -業務：監聽整個專案的路由變化情況： -- -全域性前置守衛監聽某個路由的變化情況： -- -路由的獨享守衛監聽路由的元件的路由變化情況： --

-元件內的守衛導航

路由的使用

vue路由的使用

React路由的使用

路由使用路由跳轉路由傳參

路由的使用

vue路由的使用

React路由的使用

路由使用 路由跳轉 路由傳參

相關推薦

路由使用路由跳轉路由傳參