Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級：授課學(xué)期：教師姓名：年月日 課程名稱第10章 VueRouter單頁面開發(fā)計(jì)劃學(xué)時(shí)6內(nèi)容分析在傳統(tǒng)的Web頁面中，不同頁面間的跳轉(zhuǎn)都是通過向服務(wù)器發(fā)起請求，服務(wù)器處理請求后向?yàn)g覽器推送頁面實(shí)現(xiàn)的，也就是使用超鏈接來實(shí)現(xiàn)不同頁面間的切換和跳轉(zhuǎn)。而在單頁應(yīng)用程序中，不同視圖(組件的模板）的內(nèi)容都渲染在同一個(gè)頁面中，頁面間的跳轉(zhuǎn)則是在瀏覽器端完成的，也就是使用VueRouter實(shí)現(xiàn)不同組件之間的切換。VueRouter還具有一些高級功能，例如路由嵌套，路由傳參和導(dǎo)航守衛(wèi)等，這使得構(gòu)建復(fù)雜的前端頁面變得更加簡便。本章重點(diǎn)介紹路由的分類、路由的基礎(chǔ)知識和進(jìn)階知識。通過學(xué)習(xí)本章內(nèi)容，讀者可快速掌握VueRouter的使用方法，實(shí)現(xiàn)組件的切換。教學(xué)目標(biāo)與教學(xué)要求【知識目標(biāo)】理解路由的定義與分類掌握路由的安裝與配置掌握嵌套路由、重定向與命名路由的用法掌握路由傳參與編程式路由的用法掌握3種導(dǎo)航守衛(wèi)與路由組合式API的用法【技能目標(biāo)】能夠正確安裝與配置路由能夠正確使用嵌套路由、重定向與命名路由能夠正確使用路由的傳參方式能夠正確使用編程式路由能夠正確使用3種導(dǎo)航守衛(wèi)與路由組合式API【育人目標(biāo)】培養(yǎng)學(xué)員在遇到問題時(shí)能夠獨(dú)立思考和查找解決方案的能力。強(qiáng)調(diào)代碼審查的重要性，促進(jìn)團(tuán)隊(duì)成員之間的知識分享和互相學(xué)習(xí)。教學(xué)重點(diǎn)路由的安裝與配置創(chuàng)建第一個(gè)路由項(xiàng)目嵌套路由重定向與命名路由路由傳參編程式導(dǎo)航實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面導(dǎo)航守衛(wèi)路由組合式API實(shí)訓(xùn)：蔬菜商品信息頁面教學(xué)難點(diǎn)實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面實(shí)訓(xùn)：蔬菜商品信息頁面教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一、二課時(shí)（初識路由、路由的安裝與配置、創(chuàng)建第一個(gè)路由項(xiàng)目、嵌套路由、重定向與命名路由）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的初識路由、路由的安裝與配置、創(chuàng)建第一個(gè)路由項(xiàng)目、嵌套路由、重定向與命名路由等內(nèi)容。明確學(xué)習(xí)目標(biāo)理解路由的定義與分類掌握路由的安裝與配置方式掌握創(chuàng)建第一個(gè)路由項(xiàng)目的方式掌握嵌套路由的使用方式掌握重定向與命名路由的使用方式知識講解知識點(diǎn)1-初識路由路由的定義VueRouter能夠根據(jù)不同的請求路徑，切換顯示不同組件進(jìn)行渲染頁面，從而實(shí)現(xiàn)更新視圖無需重新請求頁面。VueRouter本質(zhì)上是在不同的請求路徑（URL）與頁面之間建立映射關(guān)系。路由的分類后端路由后端路由可用于處理客戶提交的請求，其工作過程為——瀏覽器在地址欄中切換路徑（URL）時(shí)，會(huì)向服務(wù)器發(fā)送請求，服務(wù)器響應(yīng)后，根據(jù)請求路徑找到匹配的函數(shù)來處理該請求，之后返回響應(yīng)數(shù)據(jù)（頁面）。前端路由前端路由可用于展示頁面內(nèi)容。其工作過程為——當(dāng)瀏覽器的路徑改變時(shí)，會(huì)根據(jù)路徑顯示對應(yīng)組件。前端路由模式兩種模式的對比知識點(diǎn)2-路由的安裝與配置路由的安裝路由有2種安裝方式，第1種方式是使用CDN在頁面中引入路由，具體代碼如下所示。<scriptsrc="/vue-router@4"></script>第2種方式是使用NPM的方式安裝路由，打開項(xiàng)目終端在項(xiàng)目根目錄下執(zhí)行如下命令。npminstallvue-router@4在VueCLI創(chuàng)建的項(xiàng)目中配置路由在VueCLI創(chuàng)建的項(xiàng)目中使用路由，可以在創(chuàng)建項(xiàng)目時(shí)選擇配置路由，步驟如下。使用vuecreateproject命令創(chuàng)建一個(gè)名為“project”的項(xiàng)目，并使用方向鍵選擇手動(dòng)配置模版。進(jìn)入配置項(xiàng)選擇頁面。創(chuàng)建一個(gè)具有路由功能的項(xiàng)目。在瀏覽器地址欄中輸入“http://localhost:8080/”或“7:8080/”即可打開項(xiàng)目。知識點(diǎn)3-創(chuàng)建第一個(gè)路由項(xiàng)目使用VueCLI創(chuàng)建一個(gè)名為“poem_tab”的項(xiàng)目，并使用VueRouter實(shí)現(xiàn)項(xiàng)目中不同組件頁面的切換。實(shí)現(xiàn)poem_tab項(xiàng)目的步驟如下。創(chuàng)建組件在項(xiàng)目的views文件夾下新建兩個(gè)組件，分別命名為TangPoems和SongPoems。創(chuàng)建路由文件在項(xiàng)目router文件夾下的index.js文件中配置路由信息，步驟如下。首先，通過import語句從views文件夾中引入自定義組件。其次，定義路由，并在routes數(shù)組中配置映射關(guān)系。再次，通過createRouter()方法創(chuàng)建路由對象，在路由對象中配置routes。最后，通過export語句拋出路由對象。在App.vue中使用路由在App組件中使用路由，步驟如下。首先，在App組件中，編寫頁面的基本結(jié)構(gòu)，在頁面中添加一個(gè)導(dǎo)航欄用于切換唐詩和宋詞的介紹頁面。然后，使用<router-link>標(biāo)簽用于實(shí)現(xiàn)路由跳轉(zhuǎn)，該標(biāo)簽?zāi)J(rèn)會(huì)被渲染為一個(gè)<a>標(biāo)簽，標(biāo)簽中的to屬性用于設(shè)置跳轉(zhuǎn)地址。最后，使用<router-view>標(biāo)簽渲染對應(yīng)的路由組件，讀者可以將其理解為占位符。在main.js中掛載路由在main.js文件中，需要使用import語句引入路由對象，并將路由對象掛載到Vue的應(yīng)用程序?qū)嵗?。運(yùn)行應(yīng)用程序在瀏覽器中運(yùn)行應(yīng)用程序的步驟如下。在終端中輸入npmrunserve命令運(yùn)行項(xiàng)目，再打開在瀏覽器，在地址欄中輸入http://localhost:8080/，即可在瀏覽器中查看項(xiàng)目效果。單擊導(dǎo)航欄中的鏈接便可切換顯示唐詩和宋詞的介紹頁面。poem_tab項(xiàng)目的運(yùn)行效果（1）如下圖所示。poem_tab項(xiàng)目的運(yùn)行效果（2）如下圖所示。知識點(diǎn)4-嵌套路由嵌套路由也稱為多級路由，指的是在一個(gè)父級路由下，存在多個(gè)子級路由，嵌套路由能夠更好地組織和管理應(yīng)用程序中的路由關(guān)系。特定的嵌套組件結(jié)構(gòu)如下圖所示。在Vue.js中，可以使用VueRouter來實(shí)現(xiàn)嵌套路由的功能。具體使用方法如下。在router/index.js文件的routes對象中配置父級路由和子級路由在父組件中定義子組件的渲染位置在子組件中定義自身的模板內(nèi)容知識點(diǎn)5-重定向與命名路由重定向重定向（Redirect）指的是當(dāng)用戶訪問某個(gè)路由地址時(shí)，該路由地址被替換為另一個(gè)路由地址，系統(tǒng)會(huì)自動(dòng)根據(jù)新地址匹配并切換至對應(yīng)組件。在Vue3中，可以使用重定向來實(shí)現(xiàn)以下功能。當(dāng)更改了一個(gè)頁面的路徑時(shí)，可以使用重定向來確保舊的路徑仍然可以訪問到新的頁面。若想要將某一個(gè)頁面設(shè)置為默認(rèn)頁面時(shí)，可以使用重定向?qū)崿F(xiàn)。命名路由命名路由（NamedRoutes）是使用name屬性為每個(gè)路由定義一個(gè)唯一的名稱，以便在代碼中引用這個(gè)名稱，而無需硬編碼（HardCoding）路由路徑，命名路由具有簡化路由跳轉(zhuǎn)的作用。在Vue3中，可以使用命名路由來實(shí)現(xiàn)以下功能。當(dāng)需要在代碼中引用一個(gè)特定的路由時(shí)，可以使用命名路由。這樣可以避免在代碼中硬編碼路由路徑。當(dāng)需要在一個(gè)組件中跳轉(zhuǎn)到另一個(gè)組件時(shí)，可以使用命名路由。例如，在一個(gè)列表組件中，當(dāng)用戶單擊某個(gè)列表項(xiàng)時(shí)，可以使用命名路由來跳轉(zhuǎn)到詳情頁組件。對比使用命名路由和path路徑這2種路由跳轉(zhuǎn)方式，從而看出使用命名路由能夠避免硬編碼路由路徑，示例代碼如下。使用命名路由（name）：<router-link:to="{name:'libai'}">李白所作的唐詩</router-link>使用path路徑：<router-linkto="/tangpoems/libai">李白所作的唐詩</router-link>需要注意的是，to屬性的值是一個(gè)表達(dá)式，因此需要使用v-bind指令進(jìn)行綁定。知識鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三、四課時(shí)（路由傳參、編程式導(dǎo)航、實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面、導(dǎo)航守衛(wèi)、路由組合式API、實(shí)訓(xùn)：蔬菜商品信息頁面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的路由傳參、編程式導(dǎo)航、實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面、導(dǎo)航守衛(wèi)、路由組合式API、實(shí)訓(xùn)：蔬菜商品信息頁面等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握路由傳參與編程式路由的用法掌握重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面的實(shí)現(xiàn)方式掌握3種導(dǎo)航守衛(wèi)與路由組合式API的用法掌握蔬菜商品信息頁面的實(shí)現(xiàn)方式知識講解知識點(diǎn)1-路由傳參對路由傳參中的query參數(shù)和params參數(shù)進(jìn)行介紹。query參數(shù)query參數(shù)是通過在URL后添加參數(shù)來傳遞數(shù)據(jù)，例如：/user?id=123&name=Poetry。在目標(biāo)頁面中可以通過獲取URL中的參數(shù)來獲取傳遞的數(shù)據(jù)。在路由跳轉(zhuǎn)時(shí)，可以將參數(shù)添加到URL中，示例代碼如下。<router-link:to="{path:'/user',query:{id:'123',name:'Poetry'}}">User</router-link>在Vue組件中，可以通過$route.query來獲取query攜帶的參數(shù)，示例代碼如下。<template><div>{{$route.query.id}}</div>//輸出123<div>{{$}}</div>//輸出Poetry</template>params參數(shù)params參數(shù)是將參數(shù)直接添加到路由路徑中，例如：/user/123/Poetry。在定義路由信息時(shí)，需要以占位符（:參數(shù)名）的方式將需要接收的參數(shù)名放置到路由地址中，這種參數(shù)傳遞方式更加直觀且安全，但需要在配置路由映射關(guān)系時(shí)進(jìn)行參數(shù)聲明。在路由跳轉(zhuǎn)時(shí)，可以將參數(shù)添加到路由路徑中，示例代碼如下。<router-link:to="{//注意，使用params傳遞參數(shù)時(shí)，需要采用命名路由的方式進(jìn)行路由跳轉(zhuǎn)name:'user',params:{id:'123',name:'Poetry'}}">User</router-link>在配置路由映射關(guān)系時(shí)，需要在路由路徑中聲明參數(shù)，并設(shè)置props屬性為true，示例代碼如下。{path:'/user/:id/:name',//使用占位符聲明接收params參數(shù)name:user,component:User,//props的布爾值為真，允許將接收到的params參數(shù)以props的形式傳給組件props:true}在Vue組件中，獲取params傳遞的參數(shù)，以及將需要傳遞的參數(shù)作為一個(gè)數(shù)據(jù)項(xiàng)傳入props選項(xiàng)，示例代碼如下。<template><div>{{id}}</div>//輸出123<div>{{name}}</div>//輸出Poetry</template><script>exportdefault{//將需要傳遞的參數(shù)作為一個(gè)數(shù)據(jù)項(xiàng)傳入props選項(xiàng)props:['id','name'],</script>知識點(diǎn)2-編程式導(dǎo)航聲明式導(dǎo)航和編程式導(dǎo)航的對比在Vue中，聲明式導(dǎo)航和編程式導(dǎo)航均可用于頁面跳轉(zhuǎn)，但二者之間存在差別。聲明式導(dǎo)航聲明式導(dǎo)航指的是使用<router-link>標(biāo)簽來進(jìn)行頁面跳轉(zhuǎn)。示例代碼如下。<router-linkto="/home">首頁</router-link>編程式導(dǎo)航編程式導(dǎo)航指的是使用router對象的跳轉(zhuǎn)方法來進(jìn)行頁面跳轉(zhuǎn)。示例代碼如下。router.push('/home')編程式導(dǎo)航的方法在Vue中，編程式導(dǎo)航提供了router.push()、router.replace()、router.go()這3種方法來進(jìn)行路由跳轉(zhuǎn)。router.push()方法router.push()方法用于跳轉(zhuǎn)到指定的路由地址，可以在該方法中傳入一個(gè)字符串路徑或者一個(gè)描述地址的對象。router.push()方法的參數(shù)可以是一個(gè)字符串路徑，也可以是一個(gè)描述地址的對象，代碼如下。//字符串router.push('home')//對象router.push({path:'home'})//命名的路由router.push({name:'user',params:{userId:'123'}})//帶查詢參數(shù)，結(jié)果是/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})router.replace()方法router.replace()方法用于替換當(dāng)前路由，可以在該方法中傳入一個(gè)字符串路徑或者一個(gè)描述地址的對象。router.replace()方法與router.push()方法之間也可以相互轉(zhuǎn)換，即在router.push()方法中增加一個(gè)屬性replace:true，代碼如下所示。router.push({path:'/home',replace:true})//相當(dāng)于router.replace({path:'/home'})router.go()方法router.go()方法用于跳轉(zhuǎn)到地址棧中指定的路徑記錄，可以向該方法傳入一個(gè)整數(shù)n，表示需要前進(jìn)或后退的步數(shù)。代碼如下所示。//向前移動(dòng)一條記錄router.go(1)//返回（后退）一條記錄router.go(-1)//前進(jìn)3條記錄router.go(3)//如果沒有那么多記錄，靜默失敗router.go(-100)router.go(100)知識點(diǎn)3-實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)頁面重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)的商品管理頁面結(jié)構(gòu)簡圖如下圖示。重構(gòu)農(nóng)產(chǎn)品后臺管理系統(tǒng)的商品管理頁面的代碼實(shí)現(xiàn)創(chuàng)建一個(gè)名為“product”的Vue項(xiàng)目。確定各個(gè)組件間的路由嵌套關(guān)系。在項(xiàng)目router文件夾下的index.js文件中配置路由信息。在main.js文件中，引入路由并將路由掛載到Vue實(shí)例上。本實(shí)驗(yàn)重點(diǎn)分析商品管理頁，具體代碼可參考教學(xué)PPT或教材。知識點(diǎn)4-導(dǎo)航守衛(wèi)對導(dǎo)航守衛(wèi)中的全局守衛(wèi)、路由獨(dú)享守衛(wèi)和組件內(nèi)守衛(wèi)進(jìn)行介紹。全局守衛(wèi)全局守衛(wèi)又可分為全局前置守衛(wèi)（router.beforeEach）、全局后置守衛(wèi)（router.afterEach）和全局解析守衛(wèi)（router.beforeResolve）。全局前置守衛(wèi)全局前置守衛(wèi)會(huì)在每個(gè)路由跳轉(zhuǎn)前執(zhí)行，可以用于在進(jìn)入指定路由組件前進(jìn)行邏輯驗(yàn)證，例如驗(yàn)證用戶是否已登錄，或者檢查用戶是否有權(quán)限訪問該路由。使用router.beforeEach()方法注冊一個(gè)全局前置守衛(wèi)，代碼如下。constrouter=createRouter({...})router.beforeEach((to,from,next)=>{//...})router.beforeEach()方法接收以下3個(gè)參數(shù)。to：是一個(gè)Route對象，表示即將要進(jìn)入的目標(biāo)路由。from：是一個(gè)Route對象，表示當(dāng)前導(dǎo)航正要離開的路由。next：為可選參數(shù)，是一個(gè)函數(shù)對象，必須調(diào)用該方法來完成這個(gè)鉤子，執(zhí)行效果依賴next方法的調(diào)用參數(shù)。全局后置守衛(wèi)全局后置守衛(wèi)會(huì)在每個(gè)路由跳轉(zhuǎn)動(dòng)作完成后執(zhí)行，可以用來進(jìn)行一些全局后置邏輯處理，例如記錄用戶的訪問日志或者發(fā)送統(tǒng)計(jì)數(shù)據(jù)。全局后置守衛(wèi)通過調(diào)用router的afterEach()方法來實(shí)現(xiàn)。使用router.afterEach()方法注冊一個(gè)全局后置守衛(wèi)，代碼如下。constrouter=createRouter({...})router.afterEach((to,from)=>{//...})以配置/product/all所有商品頁的路由映射關(guān)系為例，代碼如下。{path:'all',name:'all',component:AllProducts,meta:{title:'所有商品'}}全局解析守衛(wèi)全局解析守衛(wèi)會(huì)在路由跳轉(zhuǎn)完成前執(zhí)行，類似于beforeEach守衛(wèi)，但是它會(huì)在異步組件加載完成后才執(zhí)行。全局解析守衛(wèi)可以用來進(jìn)行一些需要等待異步組件加載完成后才能執(zhí)行的邏輯處理。全局解析守衛(wèi)通過調(diào)用router的beforeResolve()方法來實(shí)現(xiàn)。使用router.beforeResolve()方法注冊一個(gè)全局解析守衛(wèi)，代碼如下。constrouter=createRouter({...})router.beforeResolve((to,from,next)=>{//...})路由獨(dú)享守衛(wèi)路由獨(dú)享守衛(wèi)指的是只針對某個(gè)具體路由生效的守衛(wèi)，可以用來進(jìn)行一些針對該路由的特定的邏輯處理。路由獨(dú)享守衛(wèi)只會(huì)在進(jìn)入此路由時(shí)執(zhí)行，可以在配置該路由的映射關(guān)系中直接使用beforeEnter()方法定義，示例代碼如下。{path:'/users/:id',component:UserDetails,beforeEnter:(to,from)=>{//rejectthenavigationreturnfalse},}組件內(nèi)守衛(wèi)組件內(nèi)守衛(wèi)指的是在路由組件內(nèi)執(zhí)行的鉤子函數(shù)，類似于路由組件內(nèi)的生命周期，主要有以下3個(gè)方法。beforeRouteEnter：進(jìn)入該路由組件前執(zhí)行，只能訪問到組件實(shí)例的上下文對象，無法訪問到組件實(shí)例本身。beforeRouteUpdate：該路由的動(dòng)態(tài)組件參數(shù)值發(fā)生改變時(shí)執(zhí)行，可以訪問到組件實(shí)例和上一個(gè)路由的信息。beforeRouteLeave：離開該路由組件時(shí)執(zhí)行，可以訪問到組件實(shí)例和下一個(gè)路由的信息。導(dǎo)航解析流程完整的導(dǎo)航解析流程如下。導(dǎo)航被觸發(fā)。在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)。調(diào)用全局的beforeEach守衛(wèi)。在重用的組件里調(diào)用beforeRouteUpdate守衛(wèi)。在路由配置里調(diào)用beforeEnter。解析異步路由組件。在被激活的組件里調(diào)用beforeRouteEnter。調(diào)用全局的beforeResolve守衛(wèi)。導(dǎo)航被確認(rèn)。調(diào)用全局的afterEach鉤子。觸發(fā)DOM更新。調(diào)用beforeRouteEnter守衛(wèi)中傳給next()函數(shù)的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。知識點(diǎn)5-路由組合式APIVue中的路由組合式API主要包括以下2個(gè)函數(shù)。useRoute()函數(shù)：用來獲取當(dāng)前路由信息的函數(shù)。useRouter()函數(shù)：用來獲取路由實(shí)例的函數(shù)。在setup()函數(shù)中訪