前端路由的發(fā)展歷程
認(rèn)識(shí)前端路由：
路由其實(shí)是網(wǎng)絡(luò)工程中的一個(gè)術(shù)語:
- 在
架構(gòu)一個(gè)網(wǎng)絡(luò)時(shí)，非常重要的兩個(gè)設(shè)備就是路由器和交換機(jī)。- 當(dāng)然，目前在我們生活中
路由器也是越來越被大家所熟知，因?yàn)槲覀兩钪卸紩?huì)用到路由器:- 事實(shí)上，
路由器主要維護(hù)的是一個(gè)映射表;映射表會(huì)決定數(shù)據(jù)的流向;
路由的概念在軟件工程中出現(xiàn)，最早是在后端路由中實(shí)現(xiàn)的，原因是web的發(fā)展主要經(jīng)歷了這樣一些階段:
- 后端路由階段;
- 前后端分離階段;
- 單頁面富應(yīng)用(SPA) ;
后端路由階段
早期的網(wǎng)站開發(fā)整個(gè)HTML頁面是由服務(wù)器來渲染的.
- 服務(wù)器直接
生產(chǎn)渲染好對(duì)應(yīng)的HTML頁面,返回給客戶端進(jìn)行展示
但是,一個(gè)網(wǎng)站,這么多頁面服務(wù)器如何處理呢?
- 一個(gè)頁面有
自己對(duì)應(yīng)的網(wǎng)址,也就是URL;- URL會(huì)發(fā)送到服務(wù)器,服務(wù)器會(huì)通過
正則對(duì)該URL進(jìn)行匹配,并且最后交給一個(gè)Controller進(jìn)行處理;- Controller進(jìn)行各種處理,最終生成
HTML或者數(shù)據(jù),返回給前端.
上面的這種操作,就是后端路由:
- 當(dāng)我們頁面中需要
請(qǐng)求不同的路徑內(nèi)容時(shí),交給服務(wù)器來進(jìn)行處理,服務(wù)器渲染好整個(gè)頁面,并且將頁面返回給客戶端.- 這種情況下渲染好的頁面,
不需要單獨(dú)加載任何的js和css,可以直接交給瀏覽器展示，,這樣也有利于SEO的優(yōu)化
后端路由的缺點(diǎn):
- 一種情況是
整個(gè)頁面的模塊由后端人員來編寫和維護(hù)的;- 另一種情況是
前端開發(fā)人員如果要開發(fā)頁面,需要通過PHP和Java等語言來編寫頁面代碼;- 而且通常情況下
HTML代碼和數(shù)據(jù)以及對(duì)應(yīng)的邏輯會(huì)混在一起,編寫和維護(hù)都是非常糟糕的事情;
前后端分離階段
前端渲染的理解:
- 每次請(qǐng)求涉及到的靜態(tài)資源都會(huì)從靜態(tài)資源服務(wù)器獲取，這些資源包括HTML+CSS+JS，然后
在前端對(duì)這些請(qǐng)求回來的資源進(jìn)行渲染;- 需要注意的是，客戶端的每一次請(qǐng)求，都會(huì)
從靜態(tài)資源服務(wù)器請(qǐng)求文件;- 同時(shí)可以看到，和之前的后端路由不同，這時(shí)后端只是
負(fù)責(zé)提供API了;
前后端分離階段:
- 隨著Ajax的出現(xiàn),有了
前后端分離的開發(fā)模式;- 后端只提供API來返回?cái)?shù)據(jù)，前端
通過Ajax獲取數(shù)據(jù)，并且可以通過JavaScript將數(shù)據(jù)渲染到頁面中;- 這樣做最大的優(yōu)點(diǎn)就是
前后端責(zé)任的清晰，后端專注于數(shù)據(jù)上，前端專注于交互和可視化上;- 并且當(dāng)
移動(dòng)端(iOS/Android)出現(xiàn)后，后端不需要進(jìn)行任何處理，依然使用之前的一套APl即可;- 目前比較少的網(wǎng)站采用這種模式開發(fā);
單頁面富應(yīng)用階段:
- 其實(shí)SPA最主要的特點(diǎn)就是
在前后端分離的基礎(chǔ)上加了一層前端路由.- 也就是前端來維護(hù)一套
路由規(guī)則.
前端路由的核心是什么呢?
改變URL，但是頁面不進(jìn)行整體的刷新。
有兩種模式可以做到改變URL, 但是頁面不刷新:
(1)URL的hash
- URL的hash也就是錨點(diǎn)(#),本質(zhì)上是改變window.location的href屬性;
- 我們可以通過直接賦值location.hash來改變href,但是頁面不發(fā)生刷新;
(2)Html5中的history
history接口是HTML5新增的,它有六種模式改變URL而不刷新頁面:
- replaceState:替換原來的路徑;
- pushState:使用新的路徑;
- popState:路徑的回退;
- go:向前或向后改變路徑;
- forward:向前改變路徑;
- back:向后改變路徑;
Vue-Router的使用
認(rèn)識(shí)Vue-Router
目前前端流行的三大框架,都有自己的路由實(shí)現(xiàn):
Angular的ngRouterReact的ReactRouterVue的vue-router
Vue Router是Vue.js的官方路由:
它與Vue.js核心深度集成，讓用Vue.js構(gòu)建
單頁應(yīng)用(SPA）變得非常容易;目前Vue路由最新的版本是4.x版本;
vue-router是基于路由和組件的
- 路由用于設(shè)定
訪問路徑,將路徑和組件映射起來;- 在vue-router的單頁面應(yīng)用中,頁面的路徑的改變就是組件的切換;
vue-router的基本使用
- 安裝Vue Router:
npm install vue-router - 使用步驟
第一步：
創(chuàng)建路由需要映射的組件(打算顯示的頁面);第二步：
通過createRouter創(chuàng)建路由對(duì)象，并且傳入routes和history模式;
配置路由映射:組件和路徑映射關(guān)系的routes數(shù)組;- 創(chuàng)建基于hash或者h(yuǎn)istory的模式;
第三步：使用app注冊(cè)路由對(duì)象（use方法); 第四步：路由使用:通過< router-link >和< router-view > ;
vue-router的使用過程
（1） 在一個(gè)單獨(dú)的Js文件夾中配置映射關(guān)系，以及使用模式：
// 1.導(dǎo)入createRouter函數(shù)/方法, 以及要使用的hash模式
import { createRouter, createWebHashHistory } from "vue-router";
// 3.導(dǎo)入要配置映射關(guān)系的組件
import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 2.通過createRouter創(chuàng)建一個(gè)路由: 映射關(guān)系
const router = createRouter({
// 指定要采用的模式: hash/history, 這里指定的hash
history: createWebHashHistory(),
// 傳入一個(gè)對(duì)象, 對(duì)象中通過routes維護(hù)映射關(guān)系
routes: [
{ path: "/home", component: Home },
{ path: "/about", component: About }
]
})
// 4.將路由導(dǎo)出, 供外界使用
export default router
（2）在main.js文件中, 導(dǎo)入路由并使用app.use函數(shù)注冊(cè)路由:
import { createApp } from 'vue'
import App from './App.vue'
//1.導(dǎo)入路由
import router from './router'
// createApp(App).mount('#app')
const app = createApp(App)
//2.注冊(cè)路由
app.use(router)
app.mount('#app')
（3）在要使用路由的組件中：通過< router-link >的to屬性, 可以設(shè)置調(diào)轉(zhuǎn)到哪一個(gè)url; 通過< router-view設(shè)置組件：要展示的位置
<template>
<div class="app">
<h2>App</h2>
<!-- 設(shè)置要跳轉(zhuǎn)的url -->
<!-- 點(diǎn)擊首頁, url會(huì)自動(dòng)拼接上/#/home, Home組件 就會(huì)替換下面的router-view -->
<router-link to="/home">首頁</router-link>
<!-- 點(diǎn)擊關(guān)于, url會(huì)自動(dòng)拼接上/#/about, About組件 就會(huì)替換下面的router-view -->
<router-link to="/about">關(guān)于</router-link>
<!-- 設(shè)置組件要展示的位置 -->
<router-view></router-view>
</div>
</template>
注意事項(xiàng)：
1.如果報(bào)錯(cuò)：Cannot use 'in' operator to search for 'path' in undefined;,則可能是未加括號(hào)
// 錯(cuò)誤寫法： history:createWebHistory,
// 正確寫法： history:createWebHistory(),
2.如果報(bào)錯(cuò)： Cannot read property ‘forEach‘ of undefined等一系列和router.js有關(guān)的錯(cuò)誤可能是此處：
配置映射關(guān)系時(shí)：
將routes:[]錯(cuò)誤的拼寫成了routers:[]
(routes：路途，路線，路徑的意思；不是router，也不是routers)
基本使用的細(xì)節(jié)補(bǔ)充
補(bǔ)充一：配置默認(rèn)路由（重定向）
在剛才的使用中，會(huì)有這樣一個(gè)警告：
這是一個(gè)不太好的實(shí)現(xiàn):
- 默認(rèn)情況下，進(jìn)入網(wǎng)站的首頁，我們希望< router-view>渲染首頁的內(nèi)容;
- 但是我們的實(shí)現(xiàn)中,
默認(rèn)沒有顯示首頁組件,必須讓用戶點(diǎn)擊才可以;
如何可以讓路徑默認(rèn)跳到到首頁,并且< router-view >渲染首頁組件呢?
我們?cè)趓outes中又配置了一個(gè)映射:
- path配置的是
根路徑:/redirect是重定向,也就是我們將根路徑重定向到/home的路徑下，這樣就可以得到我們想要的結(jié)果了.
補(bǔ)充二：history模式
- 前面使用的是hash模式會(huì)在url中拼接一個(gè)#號(hào)；
- 另外一種模式: history模式地址值沒有#號(hào)
使用不同的模式：
// 使用history模式
import { createRouter, createWebHashHistory,createWebHistory } from "vue-router";
const router = createRouter({
//使用hash模式：
// history:createWebHashHistory(),
// 使用history模式
history: createWebHistory(),
routes: [
{ path: "/", redirect: "/home" },
{ path: "/home", component: Home },
{ path: "/about", component: About }
]
})
補(bǔ)充三：routerlink的屬性
router-link事實(shí)上有很多屬性可以配置:
to屬性:
- 是一個(gè)字符串，或者是一個(gè)對(duì)象
<!-- <router-link :to="{path:'/about'}">關(guān)于</router-link> 通過對(duì)象的方法傳遞路徑（了解）-->
<router-link to="/about" active-class="active">關(guān)于</router-link>
replace屬性:
- 設(shè)置replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用router.replace()，而不是router.push();
<router-link to="/about" replace>關(guān)于</router-link>
<!-- replace后點(diǎn)擊返回不會(huì)保存歷史記錄，直接退到網(wǎng)頁導(dǎo)航界面 （了解） -->
active-class屬性:
- 當(dāng)router-link被選中是會(huì)自動(dòng)添加上一個(gè)class，默認(rèn)是router-link-active；
- 例如可以直接設(shè)置router-link-active這個(gè)class來控制選中的樣式這個(gè)a標(biāo)簽的樣式
- 也可以修改這個(gè)默認(rèn)的名字進(jìn)行控制
瀏覽器中F12可以看到：
代碼演示：
<!-- active-class：name 改變選中時(shí)自動(dòng)添加的名字-->
<router-link to="/home" active-class="active">首頁</router-link>
<style scoped>
/*1.對(duì) router link to選中時(shí)默認(rèn)添加的名字進(jìn)行樣式設(shè)置 */
/* .router-link-active{
color: red;
font-size: 18px;
} */
/* 2.對(duì)修改默認(rèn)后的名字進(jìn)行選中樣式設(shè)置 */
.active {
color: red;
font-size: 18px;
}
</style>
exact-active-class屬性:
- 鏈接精準(zhǔn)激活時(shí)，應(yīng)用于渲染的< a >的class，
默認(rèn)是router-link-exact-active;路由嵌套時(shí)做精準(zhǔn)匹配的，下文路由嵌套部分再做演示
路由懶加載分包處理
當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript包會(huì)變得非常大，影響頁面加載:
- 如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就會(huì)更加高效;
- 也可以提高首屏的渲染效率;
其實(shí)這里還是我們前面講到過的webpack的分包知識(shí)，而Vue Router默認(rèn)就支持動(dòng)態(tài)來導(dǎo)入組件:
這是因?yàn)閏omponent可以傳入一個(gè)組件，也可以接收一個(gè)函數(shù)，該函數(shù)需要放回一個(gè)Promise;
而import函數(shù)就是返回一個(gè)Promise;
// 使用import函數(shù), 打包時(shí)會(huì)進(jìn)行分包處理
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: () => import("../views/Home.vue")
},
{
path: "/about",
component: () => import("../views/About.vue")
}
]
我們看一下打包后的效果:
我們會(huì)發(fā)現(xiàn)分包是沒有一個(gè)很明確的名稱的，其實(shí)webpack從3.x開始支持對(duì)分包進(jìn)行命名(chunk name) :
路由的其他屬性
name屬性：
記錄路由獨(dú)一無二的名稱, 在頁面跳轉(zhuǎn)的時(shí)候也是可以指定name的(用的不多)；
meta屬性：
meta屬性放一些額外的, 自定義的數(shù)據(jù)
這個(gè)自定義數(shù)據(jù)是可以在其他地方拿到的 (后面使用到時(shí)再介紹)
動(dòng)態(tài)路由
（1）動(dòng)態(tài)路由基本匹配
很多時(shí)候我們需要將給定匹配模式的路由映射到同一個(gè)組件:
- 例如，我們可能有一個(gè)User組件，它應(yīng)該對(duì)所有用戶進(jìn)行渲染，但是用戶的ID是不同的;
- 在Vue Router中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來實(shí)現(xiàn)，我們稱之為路徑參數(shù);
{
path:"/user/:id",
component:()=> import("../Views/User.vue")
},
在router-link中進(jìn)行如下跳轉(zhuǎn):
<!-- 動(dòng)態(tài)路由 -->
<router-link to="/user/123" active-class="active">用戶123</router-link>
<router-link to="/user/321" active-class="active">用戶321</router-link>
運(yùn)行效果：
（2）獲取動(dòng)態(tài)路由的值
上面代碼中, 我們雖然實(shí)現(xiàn)了/user拼接不同的id顯式同一個(gè)頁面
但是我們頁面中展示的效果是相同的, 我們需要
在User組件中根據(jù)不同的用戶, 獲取到不同的id值進(jìn)行展示
在模板template中：通過$route.params:
<template>
<div class="user">
<h2>User{{ $route.params.id }}</h2>
</div>
</template>
在Options API 的 created中:通過 this.$route.params獲取值：
<script>
export default {
// Options API created中獲取
created() {
console.log(this.$route.params.id)
},
}
</script>
在setup中，我們要使用 vue-router庫中的 useRoute:
<script setup>
// 從vue-router庫中導(dǎo)入useRoute
import { useRoute } from 'vue-router';
// useRoute函數(shù)會(huì)返回一個(gè)Route對(duì)象
const route = useRoute()
// 通過返回的Route對(duì)象可以拿到id
console.log(route.params.id)
</script>
（3）NotFound頁面的匹配和顯示
對(duì)于那些沒有匹配到的路由，我們通常會(huì)匹配到固定的某個(gè)頁面;
/:pathMatch(.*)匹配所有的路徑;$route.params.pathMatch獲取到傳入的參數(shù)/:pathMatch(.*)*匹配所有的路徑并解析成數(shù)組;
- 比如NotFound的錯(cuò)誤頁面中，這個(gè)時(shí)候我們可編寫一個(gè)動(dòng)態(tài)路由用于匹配所有的頁面;
{
// 如果匹配不到任何一個(gè)不存在的路徑，那么就自動(dòng)顯示下面的這個(gè)組件
// path:"/:pathMatch(.*)", 在后面在加上*，會(huì)對(duì)輸入的錯(cuò)誤路徑解析/成數(shù)組
path:"/:pathMatch(.*)*",
component:()=> import("../Views/NotFound.vue")
},
如圖所示：
上圖所示不僅匹配到了NotFound界面并且提示了用戶的什么路徑不正確,可以通過 $route.params.pathMatch獲取到傳入的參數(shù)：
<h2> Notfound:您當(dāng)前的路徑{{$route.params.pathMatch}}不正確，請(qǐng)輸入正確的路徑</h2>
路由嵌套
什么是路由的嵌套呢？
目前我們匹配的Home、About、User等都屬于
第一層路由，我們?cè)谒鼈冎g可以來回進(jìn)行切換；
但是呢，我們Home頁面內(nèi)部本身也可能會(huì)有多個(gè)組件之間來回切換：
- 比如Home中包括Product、Message，它們可以在Home內(nèi)部來回切換；
- 這個(gè)時(shí)候我們就需要使用嵌套路由，在Home中也使用 router-view 來占位之后需要渲染的組件；
使用嵌套路由, 首先我們需要配置嵌套路由
在配置嵌套路由的映射關(guān)系中, 添加children屬性，以Home組件為例：
{
path:"/home",
component:Home ,
// children中配置home的二級(jí)路由
children:[
// 配置HomeProduct組件路由
{
path:"product", //等價(jià)于home/product
component:()=> import("../Views/HomeProduct.vue")
},
// 配置HomeInfo組件路由
{
path:"info", //等價(jià)于home/info
component:()=> import("../Views/HomeInfo.vue")
}
]
},
在Home組件中定義router-view展示二級(jí)路由：
<template>
<div class="home">
<RouterLink to="/home/product">商品列表</RouterLink>
<RouterLink to="/home/info">商品信息</RouterLink>
</div>
<RouterView></RouterView>
</template>
前面路由的其他屬性一章中提到了exact-active-class屬性:
exact-active-class屬性的默認(rèn)class是
router-link-exact-active
- 前面提到active-class屬性會(huì)匹配當(dāng)前選中的< router-view >標(biāo)簽
- 而exact-active-class是精準(zhǔn)匹配當(dāng)前選中的標(biāo)簽, 那這個(gè)精準(zhǔn)匹配怎么理解呢,
其實(shí)很好理解，如下圖所示：
- 當(dāng)選擇首頁中的商品時(shí)，
首頁和商品作為被選中的router-link標(biāo)簽， 都會(huì)添加上active-class屬性的默認(rèn)classrouter-link-active- 而
商品這個(gè)< router-link >標(biāo)簽還會(huì)額外添加, exact-active-class屬性的默認(rèn)classrouter-link-exact-active
路由的編程式導(dǎo)航
- 前面我們路由的頁面跳轉(zhuǎn)都是通過< router-link >標(biāo)簽完成的;
- 但如果我們希望通過代碼來完成頁面的跳轉(zhuǎn)，比如
點(diǎn)擊的是一個(gè)按鈕, 點(diǎn)擊一個(gè)span等等其他元素也實(shí)現(xiàn)頁面跳轉(zhuǎn)
1. 代碼的頁面跳轉(zhuǎn)操作步驟：
（1）先監(jiān)聽元素的點(diǎn)擊：
<span @click="homeSpanClick">首頁</span>
<button @click="aboutBtnClick">關(guān)于</button>
<Routerview/>
（2）使用router.push跳轉(zhuǎn):
<script setup>
//1.導(dǎo)入函數(shù)useRouter
import { useRouter } from 'vue-router'
// 2.通過函數(shù)useRouter拿到路由
const router = useRouter()
// 監(jiān)聽元素的點(diǎn)擊
function homeSpanClick() {
// 跳轉(zhuǎn)到首頁
router.push("/home")
}
function aboutBtnClick() {
// 跳轉(zhuǎn)到關(guān)于頁 replace沒有歷史記錄
router.replace("/home/message")
}
</script>
2. push中也可以傳入一個(gè)對(duì)象, 使用對(duì)象的寫法就可以通過query屬性傳遞參數(shù)：
function aboutBtnClick() {
router.push({
path: "/about",
// 通過query傳遞參數(shù)
query: {
name: "sevgilid",
age: 18
}
})
}
在界面中通過 $route.query 來獲取參數(shù)：
<h2>{{ $route.query.name }} - {{ $route.query.age }}</h2>
3. 頁面的前進(jìn)后退
router中的存在
go，back和forward方法
// 導(dǎo)入函數(shù)useRouter
import { useRouter } from "vue-router"
// 通過函數(shù)useRouter拿到路由對(duì)象
const router = useRouter()
//1.go方法示例：
function goClick() {
// 向前移動(dòng)一條記錄
router.go(1)
// 返回上一條記錄：相當(dāng)于瀏覽器的后退按鈕，回到上一個(gè)訪問的頁面。
// router.go(-1)
}
//2.back方法示例：
function backClick() {
//移動(dòng)歷史棧中的上一步，它的功能與瀏覽器的后退按鈕類似。
router.back()
}
//3.forward方法示例：
function forWardClick() {
//移動(dòng)歷史棧中的下一步，它的功能與瀏覽器的前進(jìn)按鈕類似。
router.forward()
}
動(dòng)態(tài)管理路由對(duì)象
1.動(dòng)態(tài)添加路由
某些情況下我們可能需要?jiǎng)討B(tài)的來添加路由:
- 比如根據(jù)用戶不同的權(quán)限，注冊(cè)不同的路由;
- 這個(gè)時(shí)候我們可以使用一個(gè)方法addRoute;
如果我們是為route添加一個(gè)children路由，那么可以傳入對(duì)應(yīng)的name:
2.刪除路由（了解）
刪除路由有以下三種方式:
- 方式一:添加一個(gè)name相同的路由;
- 方式二:通過removeRoute方法，傳入路由的名稱;
- 方式三:通過addRoute方法的返回值回調(diào);
3.路由的其他方法（了解）
- router.hasRoute():檢查路由是否存在。
- router.getRoutes():獲取一個(gè)包含所有路由記錄的數(shù)組。
console.log(router.hasRoute("home")) // true
console.log(router.getRoutes())//....數(shù)組
路由導(dǎo)航守衛(wèi)鉤子
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。
- 導(dǎo)航：在home頁面跳轉(zhuǎn)到about頁面的這個(gè)過程, 我們稱之為導(dǎo)航
導(dǎo)航守衛(wèi)：在跳轉(zhuǎn)這個(gè)過程的中間環(huán)節(jié), 我們稱之為導(dǎo)航守衛(wèi), 我們可以在這個(gè)環(huán)節(jié)對(duì)跳轉(zhuǎn)進(jìn)行攔截, 進(jìn)行邏輯判斷
在跳轉(zhuǎn)這個(gè)過程的中間環(huán)節(jié), 我們稱之為導(dǎo)航守衛(wèi), 我們可以在這個(gè)環(huán)節(jié)對(duì)跳轉(zhuǎn)進(jìn)行攔截, 進(jìn)行邏輯判斷
全局的前置守衛(wèi)beforeEach是在導(dǎo)航觸發(fā)時(shí)會(huì)被回調(diào)的:
它有兩個(gè)參數(shù):
-
to:即將進(jìn)入的路由Route對(duì)象; -
from: 即將離開的路由Route對(duì)象;
它有返回值:
false:取消當(dāng)前導(dǎo)航;不返回或者undefined:進(jìn)行默認(rèn)導(dǎo)航;返回一個(gè)路由地址:
- 可以是一個(gè)string類型的路徑;
- 可以是一個(gè)對(duì)象，對(duì)象中包含path、query、params等信息;
可選的第三個(gè)參數(shù): next(不推薦使用)
- 在Vue2中我們是通過next函數(shù)來決定如何進(jìn)行跳轉(zhuǎn)的;
- 但是在Vue3中我們是通過返回值來控制的，不再推薦使用next函數(shù)，這是因?yàn)殚_發(fā)中很容易調(diào)用多次next;
比如有如下需求：
現(xiàn)在有一個(gè)訂單頁面: 在訂單頁面我們主要實(shí)現(xiàn)兩個(gè)邏輯:
- 判斷用戶是否登錄
- 根據(jù)邏輯進(jìn)行不同的處理
- 若用戶已經(jīng)登錄, 進(jìn)入訂單頁面
- 若用戶沒有登錄, 進(jìn)入登錄頁面, 等到用戶登錄成功, 進(jìn)入首頁(或者訂單頁)
路由配置中的邏輯:
// 路由導(dǎo)航守衛(wèi)
router.beforeEach((to, from) => {
const token = localStorage.getItem("token")
// 判斷用戶是否登錄, 是否去order頁面
if (!token && to.path === "/order") {
return "/login"
}
})
order界面中的邏輯：
import { useRouter } from "vue-router"
const router = useRouter()
function loginClick() {
// 模擬向服務(wù)器發(fā)生請(qǐng)求, 服務(wù)器會(huì)返回token
localStorage.setItem("token", "chenyq")
// 登錄成功跳轉(zhuǎn)會(huì)order頁面
router.push("/order")
}
其他導(dǎo)航守衛(wèi)(了解)
Vue-Router還提供了很多的其他守衛(wèi)函數(shù)，目的都是在某一個(gè)時(shí)刻給予我們回調(diào)，讓我們可以更好的控制程序的流程或者功能:
https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html文章來源：http://www.zghlxwxcb.cn/news/detail-483574.html
完整的導(dǎo)航解析流程:文章來源地址http://www.zghlxwxcb.cn/news/detail-483574.html
- 導(dǎo)航被觸發(fā)。
- 在失活的組件里調(diào)用beforeRouteLeave 守衛(wèi)。
- 調(diào)用全局的beforeEach守衛(wèi)。
- 在重用的組件里調(diào)用beforeRouteUpdate守衛(wèi)(2.2+)。
- 在路由配置里調(diào)用beforeEnter。
- 解析異步路由組件。
- 在被激活的組件里調(diào)用beforeRouteEnter。
- 調(diào)用全局的beforeResolve守衛(wèi)(2.5+)。
- 導(dǎo)航被確認(rèn)。
- 調(diào)用全局的afterEach鉤子。
- 觸發(fā)DOM更新。
- 調(diào)用beforeRouteEnter守衛(wèi)中傳給next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。
到了這里，關(guān)于【vue3】13-前端路由-Vue-Router的詳解: 從入門到掌握的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
