《前端開(kāi)發(fā)框架》課件-第5章 路由

5.2初識(shí)Vue

Router5.2.1

Vue

Router的安裝先定一個(gè)小目標(biāo)！掌握Vue

Router的安裝，能夠獨(dú)立安裝Vue

Router5.2.1

Vue

Router的安裝Vue

Router有多個(gè)版本，那么Vue

3適用于VueRouter哪個(gè)版本？5.2.1

Vue

Router的安裝Vue

Router有多個(gè)版本，其中，VueRouter

4適用于Vue

3，而Vue

Router

3適用于Vue

2。由于本書(shū)重點(diǎn)講解Vue

3，所以接下來(lái)將基于Vue

Router4進(jìn)行講解。5.2.1

Vue

Router的安裝在Vue

3項(xiàng)目中演示Vue

Router的安裝在D:\vue\chapter05目錄下創(chuàng)建一個(gè)新的Vue

3項(xiàng)目。步驟1yarncreatevitecdmy-routeryarn--templatevue步驟2步驟3項(xiàng)目名稱5.2.1

Vue

Router的安裝在Vue

3項(xiàng)目中演示Vue

Router的安裝在my-router目錄中，通過(guò)yarn安裝Vue

Router。步驟1yarnadd--步驟2步驟3項(xiàng)目運(yùn)行時(shí)依賴@4表示安裝vue-router的版本號(hào)為4，即VueRouter

45.2.1

Vue

Router的安裝在Vue

3項(xiàng)目中演示Vue

Router的安裝安裝完成后，打開(kāi)package.json文件，查看Vue

Router的版本號(hào)。步驟1"dependencies":{"vue":

"^3.2.45","vue-router":"4"},步驟2步驟35.2.2

Vue

Router的基本使用先定一個(gè)小目標(biāo)！掌握Vue

Router的基本使用方法，能夠在項(xiàng)目中配置Vue

Router5.2.2

Vue

Router的基本使用路由的基本使用步驟分為以下4步。定義路由組件定義路由鏈接和路由視圖創(chuàng)建路由模塊導(dǎo)入并掛載路由模塊12345.2.2

Vue

Router的基本使用1.定義路由組件在src\components目錄下創(chuàng)建Home.vue文件和About.vue文件。<!--Home.vue文件--><template><!--About.vue文件--><template><divclass="home-container"><h3>Home組件</h3></div><divclass="about-container"><h3>About組件</h3></div></template></template><stylescoped>.home-container{min-height:150px;background-color:#f2f2f2;padding:15px;<stylescoped>.about-container{min-height:150px;background-color:#f2f2f2;padding:15px;}}</style></style>5.2.2

Vue

Router的基本使用2.定義路由鏈接和路由視圖使用<router-view>標(biāo)簽定義路由視圖，該標(biāo)簽會(huì)被渲染成當(dāng)前路由對(duì)應(yīng)的組件。通過(guò)<router-link>標(biāo)簽定義路由鏈接方便在不同組件之間切換。<template><divclass="app-container"><h1>App根組件</h1><router-link

to="/home">首頁(yè)</router-link><router-link

to="/about">關(guān)于</router-link><hr><router-view></router-view></div></template>5.2.2

Vue

Router的基本使用>>接上頁(yè)代碼<stylescoped>.app-container{text-align:

center;font-size:

16px;}.app-containera{padding:10px;color:

#000;}.app-containera.router-link-active

{color:

#fff;background-color:#000;}</style>5.2.2

Vue

Router的基本使用3.創(chuàng)建路由模塊①在src目錄下創(chuàng)建router.js文件作為路由模塊，并在該文件中導(dǎo)入路由相關(guān)函數(shù)。import{createRouter,

createWebHashHistory}from

'vue-router'②在router.js文件中導(dǎo)入需要被路由控制的Home組件和About組件。importHomefrom

'./components/Home.vue'importAboutfrom

'./components/About.vue'5.2.2

Vue

Router的基本使用③在router.js文件中創(chuàng)建路由實(shí)例對(duì)象。constrouter=createRouter({history:createWebHashHistory(),注意：routes:[步驟②和③的組件加載方式是一次加載所有組件，除了這種方式外，還可以通過(guò)懶加載的方式動(dòng)態(tài)加載組件。（下一頁(yè)會(huì)講到）{path:'/home',

component:Home},{path:'/about',component:About},]})④在router.js文件中導(dǎo)出路由實(shí)例對(duì)象。exportdefaultrouter5.2.2

Vue

Router的基本使用下面講解如何通過(guò)懶加載的方式動(dòng)態(tài)加載組件。l

刪除第②步的代碼。l

將第③步的代碼修改為如下代碼。constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/home',

component:()=>import('./components/Home.vue')},{path:'/about',component:()=>import('./components/About.vue')},]})5.2.2

Vue

Router的基本使用4.導(dǎo)入并掛載路由模塊在src\main.js文件中導(dǎo)入并掛載路由模塊。import{createApp}from

'vue'import'./style.css'importAppfrom

'./App.vue'importrouterfrom

'./router.js'

//導(dǎo)入路由模塊constapp=createApp(App)app.use(router)//掛載路由模塊app.mount('#app')5.2.2

Vue

Router的基本使用執(zhí)行yarndev命令啟動(dòng)服務(wù)。服務(wù)啟動(dòng)成功后，在瀏覽器中訪問(wèn):5173/，使用路由后的初始頁(yè)面效果、單擊“首頁(yè)”路由鏈接后的Home組件的效果、單擊“關(guān)于”路由鏈接后的About組件的效果如下圖所示。使用路由后的初始頁(yè)面效果Home組件的效果About組件的效果5.2.2

Vue

Router的基本使用多學(xué)一招：更改路由鏈接激活項(xiàng)的類名在默認(rèn)情況下，路由鏈接激活項(xiàng)的類名為router-link-active。如果需要更改類名，可以在創(chuàng)建路由實(shí)例對(duì)象時(shí)通過(guò)linkActiveClass屬性設(shè)置一個(gè)類名。constrouter=createRouter({linkActiveClass:'router-active',……})5.3路由重定向5.3

路由重定向先定一個(gè)小目標(biāo)！掌握路由重定向的使用方法，能夠解釋路由重定向的實(shí)現(xiàn)5.3

路由重定向什么是路由重定向？5.3

路由重定向在開(kāi)發(fā)過(guò)程中，可能希望當(dāng)用戶訪問(wèn)不同的路徑時(shí)，頁(yè)面中顯示同一個(gè)組件，這時(shí)就需要用到路由重定向。路由重定向可以使用戶在訪問(wèn)一個(gè)URL地址時(shí)，強(qiáng)制跳轉(zhuǎn)到另一個(gè)URL地址，從而展示特定的組件。通過(guò)路由匹配規(guī)則中的redirect屬性可以指定一個(gè)新的路由地址，從而實(shí)現(xiàn)路由重定向。5.3

路由重定向下面演示路由重定向的使用方法。修改src\router.js文件，實(shí)現(xiàn)當(dāng)用戶訪問(wèn)“/”路徑時(shí)，將路由重定向到“/home”路徑。constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/',redirect:'/home'

},{path:'/home',

component:import('./components/Home.vue')},{path:'/about',component:import('./components/About.vue')}]})5.4嵌套路由5.4

嵌套路由先定一個(gè)小目標(biāo)！掌握嵌套路由的使用方法，能夠?qū)崿F(xiàn)路由的嵌套5.4

嵌套路由什么是嵌套路由？5.4

嵌套路由嵌套路由是指通過(guò)路由實(shí)現(xiàn)組件的嵌套展示，它主要由頁(yè)面結(jié)構(gòu)決定。實(shí)際項(xiàng)目中的應(yīng)用界面通常由多層嵌套的組件組合而成，為了使多層嵌套的組件能夠通過(guò)路由訪問(wèn)，路由也需要具有嵌套關(guān)系，也就是在路由里面嵌套它的子路由。5.4

嵌套路由下面演示嵌套路由的簡(jiǎn)單配置。在src\router.js文件的路由匹配規(guī)則中通過(guò)children屬性定義子路由匹配規(guī)則。routes:[{path:'父路由路徑',component:父組件,children:[{path:'子路由路徑1',component:子組件1},{path:'子路由路徑2',component:子組件2}]}]5.4

嵌套路由在組件中定義子路由鏈接的語(yǔ)法格式如下。<router-link

to="/父路由路徑/子路由路徑"></router-link>注意5.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)在src\components目錄下創(chuàng)建pages目錄，用于存放子路由組件。步驟1步驟2步驟3步驟4步驟55.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)創(chuàng)建src\components\pages\Tab1.vue文件。步驟1步驟2<template><div>Tab1組件</div></template><stylescoped>div{步驟3text-align:

left;background-color:#9dc4e5;}步驟4步驟5</style>5.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)創(chuàng)建src\components\pages\Tab2.vue文件。步驟1步驟2<template><div>Tab2組件</div></template><stylescoped>div{步驟3text-align:

left;background-color:#ffba00;}步驟4步驟5</style>5.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)在component\About.vue文件中添加子路由鏈接和子路由視圖。步驟1步驟2<template><divclass="about-container"><h3>About組件</h3><router-link

to="/about/tab1">tab1</router-link><router-link

to="/about/tab2">tab2</router-link><hr>步驟3步驟4步驟5<router-view></router-view></div></template><stylescoped>.about-container{5.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)>>接上頁(yè)代碼步驟1步驟2min-height:150px;background-color:#f2f2f2;padding:15px;}步驟3.about-containera{padding:10px;border:1px

solid#ccc;border-radius:

5px;padding:5px

10px;color:

#000;步驟4步驟5margin:05px;}5.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)>>接上頁(yè)代碼步驟1步驟2.about-containera.router-link-active

{color:

#000;background-color:#deebf6;}步驟3</style>步驟4步驟55.4

嵌套路由演示嵌套路由的實(shí)現(xiàn)修改src\router.js文件，在routes中導(dǎo)入Tab1組件和Tab2組件，并使用children屬性定義子路由匹配規(guī)則。步驟1步驟2routes:[{path:'/',redirect:'/about'},{path:'/home',

component:()=>import('./components/Home.vue')},步驟3{path:'/about',component:()=>import('./components/About.vue'),步驟4步驟5children:[{path:'tab1',component:()=>import('./components/pages/Tab1.vue')

},{path:'tab2',component:()=>import('./components/pages/Tab2.vue')

}]}]5.4

嵌套路由在瀏覽器中訪問(wèn):5173/。頁(yè)面打開(kāi)后，會(huì)自動(dòng)重定向到About組件的路由，頁(yè)面顯示About組件；單擊“tab1”鏈接，頁(yè)面顯示About組件中的Tab1組件；單擊“tab2”鏈接，頁(yè)面顯示About組件中的Tab2組件，如下圖所示。About組件中的Tab1組件About組件中的Tab2組件About組件5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值先定一個(gè)小目標(biāo)！掌握動(dòng)態(tài)路徑參數(shù)值的獲取，能夠使用$route.params或props獲取參數(shù)值5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值獲取動(dòng)態(tài)路徑參數(shù)值的2種方式：使用$route.params獲取參數(shù)值、使用props獲取參數(shù)值。假設(shè)在Movie組件中有“電影1”“電影2”“電影3”這3個(gè)鏈接，單擊它們會(huì)跳轉(zhuǎn)到同一個(gè)MovieDetails組件，并展示對(duì)應(yīng)的電影id，用于區(qū)分不用id對(duì)應(yīng)的詳情頁(yè)的數(shù)據(jù)。5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用$route.params獲取參數(shù)值新建src\components\Movie.vue文件，在該文件中定義3個(gè)路由鏈接和路由視圖。步驟1步驟2步驟3步驟4<template><divclass="movie-container">路由鏈接路由視圖</div></template><style>.movie-container{5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用$route.params獲取參數(shù)值>>接上頁(yè)代碼步驟1步驟2步驟3步驟4min-height:150px;background-color:#f2f2f2;}.movie-containera{padding:05px;font-size:

18px;border:1px

solid#ccc;border-radius:

5px;color:

#000;margin:05px;}</style>5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用$route.params獲取參數(shù)值修改src\App.vue文件，在“關(guān)于”路由鏈接下方補(bǔ)充定義“電影”路由鏈接。步驟1步驟2步驟3步驟4<router-link

to="">電影</router-link>目標(biāo)地址5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用$route.params獲取參數(shù)值創(chuàng)建src\components\MovieDetails.vue文件，使用$route.params.id獲取參數(shù)id的值。步驟1步驟2步驟3步驟4<template><p>電影{{}}頁(yè)面</p></template>獲取動(dòng)態(tài)匹配的id參數(shù)的值5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用$route.params獲取參數(shù)值修改src\router.js文件，在routes中添加路由匹配規(guī)則。步驟1步驟2步驟3routes:[{path:'/',redirect:'/movie'},//此處省略了/home和/about的路由代碼{path:'/movie',

component:()=>import('./components/Movie.vue'),children:[{path:':id',component:()=>import('./components/movieDetails.vue')}步驟4]}]5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值在瀏覽器中訪問(wèn):5173/。Movie組件初始頁(yè)面效果、單擊“電影1”鏈接，跳轉(zhuǎn)到MovieDetails組件的效果，如下圖所示。Movie組件初始頁(yè)面效果跳轉(zhuǎn)到MovieDetails組件5.5.2

獲取動(dòng)態(tài)路徑參數(shù)值使用props獲取參數(shù)值：Vue

Router允許在路由匹配規(guī)則中開(kāi)啟props傳參。①修改src\components\MovieDetails.vue文件，使用props接收路由規(guī)則中匹配到的參數(shù)。②在src\router.js文件中，為“:id”路徑的路由開(kāi)啟props傳參。<template>{<p>電影{{id}}頁(yè)面</p></template><scriptsetup>constprops=defineProps({id:Stringpath:':id',component:()=>import('./components/movieDetails.vue'),props:true}})</script>5.6命名路由5.6

命名路由先定一個(gè)小目標(biāo)！掌握命名路由的使用方法，能夠解釋命名路由的實(shí)現(xiàn)5.6

命名路由為什么使用命名路由？5.6

命名路由使用路由時(shí)，一般會(huì)先在routes屬性中配置路由匹配規(guī)則，然后在頁(yè)面中使用<router-link>的to屬性跳轉(zhuǎn)到指定目標(biāo)地址。但這種方式存在一些弊端，例如，當(dāng)目標(biāo)地址比較復(fù)雜時(shí)，不便于記憶；當(dāng)?shù)刂钒l(fā)生變化時(shí)，需要同步修改所有使用了該地址的代碼，會(huì)增加開(kāi)發(fā)的工作量。為此，Vue

Router提供了命名路由。5.6

命名路由在定義路由匹配規(guī)則時(shí)，使用name屬性為路由匹配規(guī)則定義路由名稱，即可實(shí)現(xiàn)命名路由。當(dāng)路由匹配規(guī)則有了路由名稱后，在定義路由鏈接或執(zhí)行某些跳轉(zhuǎn)操作時(shí)，可以直接通過(guò)路由名稱表示相應(yīng)的路由，不再需要通過(guò)路由路徑表示相應(yīng)的路由。使用命名路由的語(yǔ)法格式如下。{path:'路由路徑',name:'路由名稱',component:組件}注意5.6

命名路由在<router-link>標(biāo)簽中使用命名路由時(shí)，需要?jiǎng)討B(tài)綁定to屬性的值為對(duì)象。當(dāng)使用對(duì)象作為to屬性的值時(shí)，to前面要加一個(gè)冒號(hào)，表示使用v-bind指令進(jìn)行綁定。在對(duì)象中，通過(guò)name屬性指定要跳轉(zhuǎn)到的路由名稱，使用params屬性指定跳轉(zhuǎn)時(shí)攜帶的路由參數(shù)，語(yǔ)法格式如下。<router-link

:to="{name:路由名稱,params:{參數(shù)名:參數(shù)值}}"></router-link>5.6

命名路由使用命名路由實(shí)現(xiàn)單擊Home組件的“跳轉(zhuǎn)到MovieDetails組件”鏈接跳轉(zhuǎn)到MovieDetails組件，并在頁(yè)面中獲取id值。5.6

命名路由演示如何使用命名路由在src\components\Home.vue文件中的<router-link>標(biāo)簽中動(dòng)態(tài)綁定to屬性的值，指定要跳轉(zhuǎn)到的路由名稱，并傳遞參數(shù)。步驟1<template><divclass="home-container"><h3>Home組件</h3><router-link

:to="{name:'MovieDetails組件</router-link></div>',params:{id:3}}">跳轉(zhuǎn)到步驟2</template>要跳轉(zhuǎn)到MovieDetails路由5.6

命名路由演示如何使用命名路由在src\router.js文件中，將“:id”路徑的路由名稱定義為MovieDetails。步驟1{path:':id',,component:()=>import('./components/movieDetails.vue'),props:true}定義路由名稱步驟25.6

命名路由在瀏覽器中訪問(wèn):5173/。單擊“首頁(yè)”鏈接后的頁(yè)面效果、單擊“跳轉(zhuǎn)到MovieDetails組件”鏈接后的頁(yè)面效果，如下圖所示。單擊“首頁(yè)”鏈接后的頁(yè)面效果單擊“跳轉(zhuǎn)到MovieDetails組件”鏈接后的頁(yè)面效果5.7編程式導(dǎo)航5.7

編程式導(dǎo)航先定一個(gè)小目標(biāo)！掌握編程式導(dǎo)航的使用方法，能夠靈活應(yīng)用編程式導(dǎo)航5.7

編程式導(dǎo)航什么是編程式導(dǎo)航？5.7

編程式導(dǎo)航在Vue中，頁(yè)面有兩種導(dǎo)航方式，分別是聲明

式

導(dǎo)

航

和

編

程

式

導(dǎo)

航

。

其

中

，

使

用<router-link>標(biāo)簽定義導(dǎo)航鏈接的方式屬于聲明式導(dǎo)航。而編程式導(dǎo)航是先通過(guò)useRouter()函數(shù)獲取全局路由實(shí)例，然后通過(guò)調(diào)用全局路由實(shí)例實(shí)現(xiàn)導(dǎo)航。5.7

編程式導(dǎo)航Vue

Router提供了useRouter()函數(shù)，使用它可以獲取全局路由實(shí)例，該全局路由實(shí)例中提供了常用的push()方法、replace()方法和go()方法，獲取全局路由實(shí)例的示例代碼如下。<scriptsetup>import{useRouter}from

'vue-router'const=useRouter()</script>全局路由實(shí)例5.7

編程式導(dǎo)航1.push()方法push()方法會(huì)向歷史記錄中添加一個(gè)新的記錄，以編程方式導(dǎo)航到一個(gè)新的URL。當(dāng)用戶單擊瀏覽器后退按鈕時(shí)，會(huì)回到之前的URL。push()方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象，示例代碼如下。router.push('/about/tab1')//字符串路徑router.push({

path:'/about/tab1'})//帶有路徑的對(duì)象router.push({

name:'user',params:{userId:'123'}})router.push({

path:'/user',query:

{id:'1'}})router.push({

path:'/user',hash:'#admin'

})//命名路由//帶查詢參數(shù)，如：/user?id=1//帶有Hash值，如：/user#admin5.7

編程式導(dǎo)航如果在參數(shù)的對(duì)象中提供了path，則params會(huì)被忽略。為了傳遞參數(shù)，需要提供路由的name或者手動(dòng)拼接帶有參數(shù)的path，示例代碼如下。constid='123'router.push({

name:'/user',params:{userId}})//跳轉(zhuǎn)到/user/123router.push({

path:`/user/${userId}`})//以下是params不生效的情況//跳轉(zhuǎn)到/user/123router.push({

path:'/user',params:{userId}})//跳轉(zhuǎn)到/user5.7

編程式導(dǎo)航使用push()方法實(shí)現(xiàn)單擊Home組件的“跳轉(zhuǎn)到MovieDetails組件”鏈接跳轉(zhuǎn)到MovieDetails組件，并在頁(yè)面中獲取id值。5.7

編程式導(dǎo)航演示push()方法的使用修改src\components\Home.vue文件，定義一個(gè)按鈕，用于跳轉(zhuǎn)到MovieDetails組件，并傳遞參數(shù)。步驟1<template><divclass="home-container"><h3>Home組件</h3><ahref="#"@click.prevent="">跳轉(zhuǎn)到MovieDetails組件</a></div>步驟2</template>綁定gotoMovie()方法5.7

編程式導(dǎo)航演示push()方法的使用在src\components\Home.vue文件中編寫(xiě)gotoMovie()方法，調(diào)用router.push()方法實(shí)現(xiàn)路由跳轉(zhuǎn)，需要設(shè)置要跳轉(zhuǎn)到的路由名稱和攜帶的路由參數(shù)。步驟1<scriptsetup>import{useRouter}from

'vue-router'constrouter=useRouter()步驟2constgotoMovie=movieId=>{router.push({name:'MovieDetails',params:{id:movieId}})}</script>5.7

編程式導(dǎo)航2.replace()方法replace()方法與push()方法類似，都是以編程方式導(dǎo)航到一個(gè)新的URL。replace()方法在導(dǎo)航后不會(huì)向歷史記錄中添加新的記錄，而是會(huì)替換歷史記錄中的當(dāng)前記錄。在聲明式導(dǎo)航中，為<router-link>標(biāo)簽添加replace屬性也能實(shí)現(xiàn)與replace()方法類似的效果，示例代碼如下。//編程式導(dǎo)航router.replace({

path:'/user'})<!--聲明式導(dǎo)航--><router-link

:to="{path:'/user'}"replace></router-link>5.7

編程式導(dǎo)航3.go()方法go()方法用于實(shí)現(xiàn)前進(jìn)或后退的效果，其參數(shù)表示歷史記錄中前進(jìn)或后退的步數(shù)，類似于window.history.go()，相應(yīng)的地址欄也會(huì)發(fā)生改變。l

go(1)表示前進(jìn)一條記錄。l

go(-1)表示后退一條記錄。5.7

編程式導(dǎo)航使用go()方法實(shí)現(xiàn)單擊MovieDetails組件的“后退”按鈕后返回到Home組件的效果。5.7

編程式導(dǎo)航演示go()方法的使用修改src\components\MovieDetails.vue文件，在該文件中定義一個(gè)按鈕，用于后退到上一個(gè)組件頁(yè)面。步驟1<template><p>電影{{id}}頁(yè)面</p><button@click="</template>">后退</button>步驟2綁定goBack()方法5.7

編程式導(dǎo)航演示go()方法的使用在src\components\MovieDetails.vue文件中編寫(xiě)goBack()方法，調(diào)用router.go()方法實(shí)現(xiàn)后退效果。步驟1import{useRouter}from

'vue-router'constrouter=useRouter()constgoBack=()=>{router.go(-1)步驟2}5.7

編程式導(dǎo)航在瀏覽器中訪問(wèn):5173/。先單擊“首頁(yè)”鏈接切換到首頁(yè)，然后單擊“跳轉(zhuǎn)到MovieDetails組件”，查看添加了“后退”按鈕的頁(yè)面效果，如下圖所示。單擊“首頁(yè)”鏈接后的頁(yè)面效果單擊“跳轉(zhuǎn)到MovieDetails組件”的頁(yè)面效果5.8導(dǎo)航守衛(wèi)5.8

導(dǎo)航守衛(wèi)先定一個(gè)小目標(biāo)！掌握導(dǎo)航守衛(wèi)的使用方法，能夠?qū)崿F(xiàn)路由訪問(wèn)權(quán)限的控制5.8

導(dǎo)航守衛(wèi)什么是導(dǎo)航守衛(wèi)？5.8

導(dǎo)航守衛(wèi)導(dǎo)航守衛(wèi)用于控制路由的訪問(wèn)權(quán)限。例如，訪問(wèn)后臺(tái)主頁(yè)時(shí)，需要用戶處于已登錄狀態(tài)，如果沒(méi)有登錄，則跳轉(zhuǎn)到登錄頁(yè)面。用戶在登錄頁(yè)面進(jìn)行登錄操作，若登錄成功，則跳轉(zhuǎn)到后臺(tái)主頁(yè)；若登錄失敗，則返回登錄頁(yè)面。5.8

導(dǎo)航守衛(wèi)在登錄功能中使用導(dǎo)航守衛(wèi)的效果，如下圖所示。5.8

導(dǎo)航守衛(wèi)導(dǎo)航守衛(wèi)主要分為全局導(dǎo)航守衛(wèi)、導(dǎo)航獨(dú)享守衛(wèi)和組件導(dǎo)航守衛(wèi)。123全局導(dǎo)