快速掌握Vue Router使用方法
本篇博客會介紹Vue中的VueRouter的基本使用,編程式路由導(dǎo)航增加了我們進(jìn)行路由跳轉(zhuǎn)的靈活性,緩存路由組件保障了我們使用路由時的便捷性,生命周期鉤子為我們切入切出路由時提供了初始化與善后的工作,路由守衛(wèi)保障了我們路由組件的安全性,路由工作模式會使我們理解為啥Vue項目中的路由會有一個#,通過本篇博客會讓大家快速掌握Vue中路由的基本使用。
一、編程式路由導(dǎo)航
作用:不借助<router-link>
實(shí)現(xiàn)路由跳轉(zhuǎn),讓路由跳轉(zhuǎn)更加靈活
具體編碼:
//$router的兩個API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router.forward() //前進(jìn) this.$router.back() //后退 this.$router.go() //可前進(jìn)也可后退
二、緩存路由組件
在上一篇博客中也提到過,路由對應(yīng)的組件隨著路由的切換來而被激活,隨著路由的切換走而失活被銷毀,在我們使用WebApp的時候當(dāng)然不希望這樣的事情發(fā)生,我們希望即使有路由的切換,也要保持原有的組件不被銷毀。而緩存路由組件技術(shù)就可以完美的解決這個問題,只是在實(shí)現(xiàn)這一功能是會以一定的程序效率作為代價。下面咱們一起看一看如何實(shí)現(xiàn)路由對應(yīng)組件的保活。使用到的標(biāo)簽是<keep-alive include="News"> </keep-alive>
。
作用:讓不展示的路由組件保持掛載,不被銷毀。
具體編碼:
<keep-alive include="News"> <router-view></router-view> </keep-alive>
三、兩個新的聲明周期鉤子
作用:路由組件所獨(dú)有的兩個鉤子,用于捕獲路由組件的激活狀態(tài)。
具體名字:
activated
路由組件被激活時觸發(fā)。deactivated
路由組件失活時觸發(fā)。
<template> <ul> <li :style="{opacity}">歡迎學(xué)習(xí)Vue</li> <li v-for="p in messageList" :key="p.id">{{p.title}} <input type="text"></li> </ul> </template> <script> export default { // eslint-disable-next-line vue/multi-word-component-names name: "News", props:['id','title'], data() { return { messageList: [ { id: "001", title: "消息001" }, { id: "002", title: "消息002" }, { id: "003", title: "消息003" }, ], opacity:1 }; }, activated() { // 開啟一個定時器,調(diào)整組件透明度 console.log('News組件被激活了') this.timer = setInterval(() => { console.log('@') this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, deactivated() { //關(guān)閉定時器 console.log('News組件失活了') clearInterval(this.timer) }, }; </script> <style> </style>
四、路由守衛(wèi)
路由守衛(wèi)中可以進(jìn)行頁面權(quán)限的驗(yàn)證,沒有權(quán)限就沒有辦法進(jìn)入到相應(yīng)的頁面之中。
作用:對路由進(jìn)行權(quán)限控制
分類:全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)
全局守衛(wèi)(所有組件間路由跳轉(zhuǎn)時都需要經(jīng)過這兩個守衛(wèi)):
//全局前置守衛(wèi):初始化時執(zhí)行、每次路由切換前執(zhí)行 router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制 if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則 next() //放行 }else{ alert('暫無權(quán)限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全局后置守衛(wèi):初始化時執(zhí)行、每次路由切換后執(zhí)行 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改網(wǎng)頁的title }else{ document.title = 'vue_test' } })
上述兩個函數(shù),參數(shù)中都有from 與to,這兩個是路由守衛(wèi)中超級重要的角色,權(quán)限驗(yàn)證一般都有參照這兩個參數(shù)進(jìn)行。
除此之外前置守衛(wèi)還有一個next參數(shù),這個參數(shù)負(fù)責(zé)放行??煽偨Y(jié)如下:
from:
原始路由的一些基本信息to:
將要跳轉(zhuǎn)的路由基本信息next:
如果不傳參數(shù)為放行,就是跳轉(zhuǎn)到to指定的路由,如果傳參就跳轉(zhuǎn)到參數(shù)指定的路由next(“/login”)
4.獨(dú)享守衛(wèi):這種守衛(wèi)方式只針對包含特定屬性的路由起作用例如下面一個例子,前置路由守衛(wèi),只有要跳轉(zhuǎn)的路由中的屬性isAuth為true時才進(jìn)入判斷其他條件,否則會直接放行。通常我們會將用到的屬性在路由配置里定義在meta中。
{ name:"aboutroot", path:"/about", component:About, meta:{ isTrue:true } },
beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('暫無權(quán)限查看') // next({name:'guanyu'}) } }else{ next() } }
當(dāng)然除了可以在meta中進(jìn)行權(quán)限區(qū)分屬性的定義,還可以做一些全局的配置,例如跳轉(zhuǎn)路由之后的頁面頁簽。
{ name:"aboutroot", path:"/about", component:About, meta:{ isTrue:true title:"About組件" } },
使用:
這時當(dāng)進(jìn)入about組件時,就會顯示頁簽為About組件,為了防止出錯,我們做一些特殊處理以下代碼在路由沒有meta.title屬性是會顯示默認(rèn)頁簽在頁面的頁簽上。
router.afterEach((to,from)=>{ console.log(to,from) document.title=to.meta.title || "默認(rèn)頁簽" })
效果如下面兩個圖片。
5.組件內(nèi)守衛(wèi)
下面兩個路由執(zhí)行的時間是在進(jìn)入相應(yīng)路由之前執(zhí)行以及離開這個路由之前執(zhí)行,可以進(jìn)行鑒權(quán)。
//進(jìn)入守衛(wèi):通過路由規(guī)則,進(jìn)入該組件時被調(diào)用 beforeRouteEnter (to, from, next) { }, //離開守衛(wèi):通過路由規(guī)則,離開該組件時被調(diào)用 beforeRouteLeave (to, from, next) { }
下面一個實(shí)例表示在進(jìn)入這個組件時先判斷這個組間有沒有isTrue屬性,然后判斷本地存儲的學(xué)校是不是nylg,只有經(jīng)過兩層驗(yàn)證之后才可以進(jìn)入該組件,否則將提示進(jìn)不去。
<template> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <h2>我是About的內(nèi)容</h2> </div> </div> </div> </template> <script> export default { // eslint-disable-next-line vue/multi-word-component-names name: "About", beforeRouteEnter(to,from,next){ // alert("想要進(jìn)入組件!") if(to.meta.isTrue){ if(localStorage.getItem("school")==="nylg"){ next() }else{ alert("您無權(quán)進(jìn)入!") } }else{ alert("組件不允許進(jìn)入!") } }, //通過路由規(guī)則,離開該組件時被調(diào)用 beforeRouteLeave (to, from, next) { console.log('About--beforeRouteLeave',to,from) next() } }; </script> <style> </style>
五、路由器的兩種工作模式
對于一個url來說,什么是hash值?—— #及其后面的內(nèi)容就是hash值。
hash值不會包含在 HTTP 請求中,即:hash值不會帶給服務(wù)器。
hash模式:
- 地址中永遠(yuǎn)帶著#號,不美觀 。
- 若以后將地址通過第三方手機(jī)app分享,若app校驗(yàn)嚴(yán)格,則地址會被標(biāo)記為不合法。
- 兼容性較好。
history模式:
- 地址干凈,美觀 。
- 兼容性和hash模式相比略差。
- 應(yīng)用部署上線時需要后端人員支持,解決刷新頁面服務(wù)端404的問題。
進(jìn)行history配置會很麻煩,而且使用Vue時語法上要有一些改變,所以如果不是大型公司或者大型項目使用hash模式即可。感興趣的同學(xué)也可以自己探索history模式。
到此這篇關(guān)于快速掌握Vue Router使用方法的文章就介紹到這了,更多相關(guān)Vue Router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm
這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue通過過濾器實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了vue通過過濾器實(shí)現(xiàn)數(shù)據(jù)格式化的方法,文中講解非常細(xì)致,幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06VueJs與ReactJS和AngularJS的異同點(diǎn)
這篇文章主要為大家詳細(xì)介紹了VueJs與ReactJS和AngularJS的異同點(diǎn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Vue項目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03vue3 axios 實(shí)現(xiàn)自動化api配置詳解
這篇文章主要為大家介紹了vue3 axios 實(shí)現(xiàn)自動化api配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3?setup語法糖中獲取slot插槽的dom對象代碼示例
slot元素是一個插槽出口,標(biāo)示了父元素提供的插槽內(nèi)容將在哪里被渲染,這篇文章主要給大家介紹了關(guān)于vue3?setup語法糖中獲取slot插槽的dom對象的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04