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