詳解Vue中的路由與多種守衛(wèi)
什么是路由呢？
路由其實(shí)是一種映射關(guān)系。
生活中的路由：設(shè)備和ip的映射關(guān)系；
node.js路由：接口和服務(wù)的 映射關(guān)系；
（前端）Vue中的路由：路徑和組件的映射關(guān)系。
什么是路由守衛(wèi)呢？
如果在面試中被問到了這個(gè)，比較完美的答案如下：
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù)。官方解釋是vue-router提供的導(dǎo)航守衛(wèi)，要通過跳轉(zhuǎn)或取消的方式來守衛(wèi)導(dǎo)航。路由守衛(wèi)分為三種，全局路由、組件內(nèi)路由，路由獨(dú)享。
全局路由鉤子函數(shù)有：beforeEach、beforeResolve、afterEach（參數(shù)中沒有next）
組件內(nèi)路由的鉤子函數(shù)有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave
路由獨(dú)享的鉤子函數(shù)有：beforeEnter
1.vue-router
vue的一個(gè)插件庫，專門用來實(shí)現(xiàn)對SPA應(yīng)用的單頁Web應(yīng)用(single page web application, SPA)。整個(gè)應(yīng)用只有一個(gè)完整的頁面。點(diǎn)擊頁面中的導(dǎo)航鏈接不會刷新頁面，只會做頁面的局部更新。數(shù)據(jù)需要通過ajax請求獲取。
2.什么是路由
一個(gè)路由就是一組映射關(guān)系(key ：value)
key 為路徑, value可能是function或componente
路由分類
1.后端路由:value 杲function,用于處理客戶端提交的請求。工作過程: 服務(wù)器接收到一個(gè)請求時(shí),根據(jù)請求路徑找到匹配的函數(shù)來處理請求,返回響應(yīng)數(shù)據(jù)。
2.前端路由: value是component,用于展示頁面內(nèi)容。工作過程: 當(dāng)瀏覽器的路徑改變時(shí),對應(yīng)的組件就會顯示。
3.路由的基本使用
1.安裝vue-router
npm i vue-router
2.應(yīng)用插件
Vue.use(VueRouter)
3.router配置項(xiàng)
// 引入vueRouter
importvueRouterfrom'vue-router'
// 引入組件
importAboutfrom'../components/About'
importHomefrom'../components/Home'
export default new vueRouter({
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]})
4.使用router-link實(shí)現(xiàn)切換（注：router-link經(jīng)過瀏覽器后就會變成a標(biāo)簽哦）
<divclass="list-group">
<!-- 原始寫法——使用a標(biāo)簽進(jìn)行頁面的跳轉(zhuǎn) -->
<!-- <a class="list-group-item active" href="./about.html" rel="external nofollow" >About</a>
<a class="list-group-item" href="./home.html" rel="external nofollow" >Home</a>-->
<!-- 使用vue-Router提供的標(biāo)簽進(jìn)行路徑的修改,實(shí)現(xiàn)路由的切換 -->
<router-link
class="list-group-item"
active-class="active"
to="/about">About
</router-link>
<router-link
class="list-group-item"
active-class="active"
to="/home">Home
</router-link>
</div>5.使用router-view實(shí)現(xiàn)組件的呈現(xiàn)（類似于插槽）
<divclass="panel-body">
<!-- 指定組件的呈現(xiàn)位置 -->
<router-view>
</router-view>
</div>注：1.路由組件通常存放在pages文件夾，所以不要往components文件夾里面放了
2.通過切換，“隱藏” 了的路由組件，默認(rèn)是被銷毀掉的，需要的時(shí)候再去掛載
3.每個(gè)組件都有自己的$route屬性，里面存儲著自己的路由信息。
4.整個(gè)應(yīng)用只有一個(gè)router, 可以通過組件的$router屬性獲取到。
4.多級路由
在配置路由規(guī)則的以及路由里面進(jìn)行配置下一級路由使用children:[ { } ]這種形式
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
},
]5.路由傳參
有兩種方式，第一種就是直接再路徑里面寫query參數(shù)，第二種就是params傳參
路由命名（簡化代碼）
再to的時(shí)候就不用寫一大堆路徑了
1.params
1. 配置路由聲明接受params參數(shù)
children:[
{
name:'xiangqing',
path:'detail/:id/:title',// 使用占位符聲明接收參數(shù)
component:Detail,
}
]2.傳遞參數(shù)
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的字符串寫法 -->
<router-link:to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的對象寫法 -->
<router-link
:to="{
// 簡化路徑代碼
name:'xiangqing',// 必須使用name，不能使用path
// params:所攜帶的參數(shù)
params:{
id:m.id,
title:m.title,
}
}"
>{{m.title}}</router-link>3，接受參數(shù)
<div>
<ul>
<!-- params寫法 -->
<li>消息：{{$route.params.id}}</li>
<li>編號：{{$route.params.title}}</li>
</ul>
</div>2.路由的props配置
一共有三種配置方法，分別是對象式，布爾值式，函數(shù)式目的是讓路由組件更方便的接受到參數(shù)
children: [{
name: 'xiangqing',
// path: 'detail/:id/:title', // 使用占位符聲明接收參數(shù)
path: 'detail', // query不使用占位符聲明接收參數(shù)
component: Detail,
// props的第一種寫法
// props:{a:"1",b:"2"},
// 第二種寫法,值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數(shù)，以props的形式傳給Detail
// props:true,
// props的第三種寫法，值為函數(shù)
props($route) {// 使用解構(gòu)賦值連續(xù)寫法簡化代碼
return {id:$route.query.id,title:$route.query.title}
}
// props({query:{id,title}}) {// 使用解構(gòu)賦值連續(xù)寫法簡化代碼
// return {id,title}
// }
}]3.<router -link>的replace屬性
1.作用:控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式
2.瀏覽器的歷史記錄有兩種寫入方式:分別為push和replace，push 是追加歷史記錄，replace 是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push，所以為push的時(shí)候可以進(jìn)行后退前進(jìn)操作，而replace直接就是替換掉之前的那個(gè)地址所以在replace的里面智慧存在一個(gè)地址，也就是當(dāng)前所呈現(xiàn)的那個(gè)地址，就好比做核算，push是排隊(duì)的人，replace是做核酸的醫(yī)務(wù)人員
3.如何開啟replace模式:<router-link replace ...... >News</router- link>即可
4.編程式路由導(dǎo)航
1.作用:不借助<router- link>實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活
methods: {
//后退
back() {
this.$router.back();
},
//前進(jìn)
forward() {
this.$router.forward();
},
//可以后退也可以前進(jìn)
test() {
this.$router.go(-2);
}
}5.緩存路由組件
1.作用:讓不展示的路由組件保持掛載,不被銷毀。
2.具體實(shí)現(xiàn)方法
<keep-alivelinclude= "News"> K router-view></router-view> </keep-alive>
兩個(gè)新的生命周期鉤子
1.作用:路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)分別是activated 路由組件被激活時(shí)觸發(fā)。deactivated 路由組件失活時(shí)觸發(fā)。
6.路由守衛(wèi)
作用:對路由進(jìn)行權(quán)限控制
分類:全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)
1.全局守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
if (localStorage.getItem('school') ==='shanyu') {
next();
} else {
alert('該學(xué)校無權(quán)限查看此內(nèi)容')
}
} else {
next()
}
})
// 后置路由守衛(wèi)，切換路由后調(diào)用
router.afterEach((to, from) => {
console.log(to, from);
document.title=to.meta.title||'山魚屋'
})2.獨(dú)享路由守衛(wèi)
專門服務(wù)于一個(gè)路由的守衛(wèi)
beforeEnter: (to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) { //判斷是否需要鑒權(quán)
if (localStorage.getItem('school') ==='shanyu') {
next();
} else {
alert('該學(xué)校無權(quán)限查看此內(nèi)容')
}
} else {
next()
}
},3.組件內(nèi)守衛(wèi)
在進(jìn)入/離開組件時(shí)被激活
//進(jìn)入守衛(wèi):通過路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi):通過路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
?}4.路由器的兩種工作模式
對于一個(gè)url來說#其后面的內(nèi)容就是hash值。
就是這個(gè)#后面的
hash的特點(diǎn)及使用
1.hash值不會帶給服務(wù)器。
2.hash模式
- 1.地址中永遠(yuǎn)帶著#號
- 2.若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格, 則地址會被標(biāo)記為不合法。
- 3.兼容性較好。
3.history模式
- 1.地址干凈，美觀。
- 2.兼容性和hash模式相比略差。
- 3. 應(yīng)用部署上線時(shí)需要后端人員支持，解決刷新頁面服務(wù)端404的問題。
4.切換history模式
在route文件夾下面的index文件里添加 `mode: 'history'`這句代碼即可（默認(rèn)的是hash模式）
寫在最后
到此這篇關(guān)于Vue中的路由與多種守衛(wèi)的文章就介紹到這了,更多相關(guān)Vue路由守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue中,渲染函數(shù)是一種用于動態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運(yùn)行時(shí)進(jìn)行渲染,下面我們就來看看它的具體用法吧2023-08-08
這篇文章主要給大家介紹了關(guān)于vue自定義指令限制輸入框輸入值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
我們在開發(fā)vue項(xiàng)目的時(shí)候，創(chuàng)建的時(shí)候可能會不小心選擇了eslint，所以如果不想讓eslint檢測，我們該怎么辦呢，本文就詳細(xì)的介紹了幾種關(guān)閉方法，感興趣的可以了解一下2021-12-12
快速搭建vue2.0+boostrap項(xiàng)目的方法
這篇文章主要介紹了快速搭建vue2.0+boostrap項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue實(shí)現(xiàn)點(diǎn)擊圖片放大顯示功能
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大顯示功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-03-03
本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue3如何實(shí)現(xiàn)變量雙向綁定問題,具有很好的參考價(jià)值,希望對大家有所幫助,2023-11-11