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

第13章項(xiàng)目路由配置課件V1.0

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

創(chuàng)建路由文件第二節(jié)配置路由對象知識目標(biāo)教學(xué)目標(biāo)理解和掌握路由的安裝和配置方法掌握路由中

routes

對象配置和傳參的方法理解和掌握路由中錯誤地址的處理方法知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用13C13-01創(chuàng)建路由文件1、安裝路由模塊

2、構(gòu)建路由結(jié)構(gòu)3、掛載路由文件C13-02配置路由對象1、按需加載組件2、路由傳參3、配置錯誤地址

路由是Vue框架的一個重要模塊，它的安裝十分簡單，只要在項(xiàng)目根目錄下，通過指令方式，安裝指定版本的路由模塊即可，通常情況下，Vue3對應(yīng)的路由版本號是4以上的版本，即Vue-router4+版本，本項(xiàng)目的路由版本是Vue-router4.2.4。安裝路由模塊

安裝路由模塊只是使用項(xiàng)目具有路由功能的第一步，接下來，需要通過這個路由模塊，創(chuàng)建一個實(shí)例化的路由對象，并在創(chuàng)建對象時，配置項(xiàng)目中組件與地址的對應(yīng)關(guān)系，并導(dǎo)出這個配置完成的路由對象，用于Vue實(shí)例的掛載。

因?yàn)槁酚墒琼?xiàng)目中的一個非常獨(dú)立的模塊，因此，在實(shí)例化路由對象時，通過會在項(xiàng)目的src目錄下，創(chuàng)建一個名稱為router的單獨(dú)文件夾，并在文件夾中新建一個名稱為index的.js文件，用于保存和導(dǎo)出創(chuàng)建完成的路由對象。構(gòu)建路由結(jié)構(gòu)

當(dāng)路由對象創(chuàng)建完成，并導(dǎo)出后，接下來需要掛載到Vue實(shí)例化對象中，才能在整個項(xiàng)目中生效，掛載的方法是，打開src目錄下的main.js文件，加入代碼。1掛載路由文件構(gòu)建一個routes數(shù)組對象必須包含兩個屬性，一個是path，表示路由跳轉(zhuǎn)的地址，另外一個是component表示跳轉(zhuǎn)地址對應(yīng)的組件，除這兩個必需屬性外，還可以添加name和meta屬性，前者表示每個路由的名稱，后者表示每個路由的元信息。保存路由元信息的mate屬性無論是否定義，都可以通過this.$route.meta方式獲取到該路由的元信息，如果未定義，則返回一個空對象。元信息中可以驗(yàn)證用戶是否登錄、設(shè)置標(biāo)題和緩存，同時，還可以設(shè)置一個值，由該值決定是否顯示或隱藏某個組件或元素。本項(xiàng)目中，大部分的routes數(shù)組對象都是一個路徑對應(yīng)一個款組件的形式。按需加載組件在開發(fā)web項(xiàng)目時，需要考慮用戶輸入錯誤地址時的響應(yīng)頁面，因此，首先在src文件夾下，添加一個error文件夾，并在該文件夾中創(chuàng)建一個名為ErrPage的.vue文件，用于顯示錯誤地址響應(yīng)的頁面信息。然后，在路由配置文件src/router/index.js中，再添加一個路由對象，在對象中，通過正則表達(dá)式，捕捉到錯誤的路徑信息，再根據(jù)這樣的路徑信息，按需加載名稱為ErrPage