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

第8章路由課件V1.0

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

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

路由其他配置知識目標(biāo)教學(xué)目標(biāo)理解和掌握路由基本配置的方法和過程掌握路由間傳參和接收參數(shù)的方法理解路由重定向和守衛(wèi)配置方法和過程知識點(diǎn)預(yù)覽#節(jié)知識點(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中，通過下列命令來安裝路由模塊，-g表示全局安裝，@可以指定安裝模塊的版本號。npminstall-gvue-router@4.1.6

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

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

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

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

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

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

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

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

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

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

重定向配置

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

404配置

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

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

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