Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第08章 路由

第8章路由課件V1.0

教學(xué)內(nèi)容第一節(jié)

路由介紹第二節(jié)路由傳參第三節(jié)

路由其他配置知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握路由基本配置的方法和過(guò)程掌握路由間傳參和接收參數(shù)的方法理解路由重定向和守衛(wèi)配置方法和過(guò)程知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用8C08-01路由介紹1、基本配置

2、路由樹配置C08-02路由傳參1、路由跳轉(zhuǎn)2、帶參數(shù)跳轉(zhuǎn)3、接收跳轉(zhuǎn)參數(shù)C08-03路由其他配置1、重定向配置2、404配置3、路由守衛(wèi)配置

在Vue3中，配置路由之前需要先安裝路由，并且安裝的版本必須是4.0以上，因此，在vue-cli中，通過(guò)下列命令來(lái)安裝路由模塊，-g表示全局安裝，@可以指定安裝模塊的版本號(hào)。npminstall-gvue-router@4.1.6

路由模塊安裝成功后，就可以配置路由，方法是先在項(xiàng)目的src文件夾下添加一個(gè)名稱為router的新文件夾，并在該文件夾中添加一個(gè)名稱為index的js文件，作為路由模塊的配置文件。基本配置

一個(gè)配置路由的文件由導(dǎo)入路由模塊、創(chuàng)建路由對(duì)象和導(dǎo)出路由對(duì)象三個(gè)部分組成，在創(chuàng)建路由對(duì)象時(shí)，需要構(gòu)建路由數(shù)組，路由數(shù)組中包括一級(jí)、二級(jí)和多級(jí)路由結(jié)構(gòu)，因此，這種結(jié)構(gòu)的路由配置，又稱為路由樹配置。一級(jí)路由結(jié)構(gòu)是指在路由地址中，只有一個(gè)路徑，則稱為一級(jí)路由。多級(jí)路由結(jié)構(gòu)

在Vue路由數(shù)組中，允許配置多級(jí)的路由對(duì)象結(jié)構(gòu)，可以是二級(jí)、三級(jí)或者更多級(jí)別，最大級(jí)別原則上沒(méi)有限制，但通常最大的是三或四級(jí)，這種路由結(jié)構(gòu)，稱之為多級(jí)路由。路由樹配置多級(jí)路由配置效果路由樹配置

除了通過(guò)a標(biāo)簽進(jìn)行路由跳轉(zhuǎn)之外，還可以使用router-link標(biāo)簽實(shí)現(xiàn)跳轉(zhuǎn)功能，它是一個(gè)全局的組件，可以直接在template中使用，無(wú)需導(dǎo)入，編譯后自動(dòng)轉(zhuǎn)成一個(gè)a標(biāo)簽，但它的功能比a標(biāo)簽更加靈活，直接在當(dāng)前頁(yè)中進(jìn)行路由跳轉(zhuǎn)，不會(huì)刷新頁(yè)面。還可以在代碼中，通過(guò)路由對(duì)象router進(jìn)行頁(yè)面之前的相互跳轉(zhuǎn)。注意：從路由模塊中導(dǎo)入的必須是useRouter方法，只有在調(diào)用這個(gè)方法之后的router對(duì)象中才可以使用push方法，push方法的本質(zhì)是向當(dāng)前的路由棧中再添加一個(gè)新的路由記錄，并根據(jù)這個(gè)記錄進(jìn)行路由切換，從而實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的功能。路由跳轉(zhuǎn)

在路由跳轉(zhuǎn)時(shí)，還可以攜帶參數(shù)進(jìn)入目標(biāo)頁(yè)，跳轉(zhuǎn)標(biāo)簽和方式不同，攜帶參數(shù)的格式也不一樣，如果是一個(gè)a標(biāo)簽攜帶參數(shù)跳轉(zhuǎn)，如下代碼所示：

<ahref="/list?gradeId=1001">一年級(jí)</a>還可以在路徑中使用配置項(xiàng)指定的格式攜帶參數(shù)，如下代碼所示：<ahref="/list/1001">一年級(jí)</a>還可以使用router-link和其他標(biāo)簽攜帶參數(shù)跳轉(zhuǎn)。

帶參數(shù)跳轉(zhuǎn)

路由攜帶參數(shù)跳轉(zhuǎn)到目標(biāo)頁(yè)面后，頁(yè)面組件可以接收到攜帶傳入的參數(shù)，接收的方式與攜帶的方式相關(guān)，如果是采用查詢字符串方式攜帶，那么可以通過(guò)路由中的query對(duì)象獲取到參數(shù)，如果是其他方式，通常都是通過(guò)路由中的params對(duì)象獲取。接收跳轉(zhuǎn)參數(shù)效果接收跳轉(zhuǎn)參數(shù)

為了避免已下線的頁(yè)面和錯(cuò)誤的地址，直接訪問(wèn)會(huì)出現(xiàn)404錯(cuò)誤異?，F(xiàn)象，通常會(huì)通過(guò)重定向配置，指向一個(gè)新的頁(yè)面地址，或者跳轉(zhuǎn)到首頁(yè)，代碼如下所示。{path:'/error',redirect:'/list',}

重定向配置通常只需要配置兩個(gè)屬性就可以，一個(gè)是path，表示原有訪問(wèn)的路徑，另一個(gè)是redirect，表示重新指定的路徑，這個(gè)屬性接收三種類型的值，第一種是字符串型，第二種是router對(duì)象型，第三種是函數(shù)型。

重定向配置

并不是所有的錯(cuò)誤訪問(wèn)地址都需要重定向，有時(shí)僅是針對(duì)原有的，已下架的頁(yè)面地址做重定向，因?yàn)檫@些地址有可能是從收藏夾中直接訪問(wèn)的。針對(duì)那些沒(méi)有重定向的地址，可以添加一個(gè)公用的404頁(yè)面，如果訪問(wèn)出錯(cuò)，就直接跳轉(zhuǎn)到該頁(yè)面，代碼如下所示。{path:'/:pathMatch(.*)*',name:'404',component:()=>import('../views/404.vue'),}

404配置

雖然可以通過(guò)路由重定向，根據(jù)用戶角色進(jìn)入不同的頁(yè)面，但有的頁(yè)面在進(jìn)入時(shí)，需要再次檢測(cè)用戶的登錄狀態(tài)，如果沒(méi)有登錄，則返回登錄頁(yè)重新再登錄，如果已經(jīng)登錄，則可以進(jìn)入下一頁(yè)，這種狀態(tài)的檢測(cè)需要配置路由守衛(wèi)。

路由守衛(wèi)的配置依賴于路由對(duì)象router在生命周期中的鉤子函數(shù)，router在整個(gè)執(zhí)行過(guò)程中有三個(gè)鉤子函數(shù)，它們的功能和執(zhí)行時(shí)機(jī)如下表8-1所示：路由守衛(wèi)配置

router鉤子函數(shù)路由守衛(wèi)配置函數(shù)名稱功能說(shuō)