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

第8章路由課件V1.0

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

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

路由其他配置知識目標教學目標理解和掌握路由基本配置的方法和過程掌握路由間傳參和接收參數(shù)的方法理解路由重定向和守衛(wèi)配置方法和過程知識點預覽#節(jié)知識點難點重點應用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

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

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

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

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

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

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

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

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

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

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

重定向配置

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

404配置

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

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

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