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

第13章項目路由配置課件V1.0

教學內容第一節(jié)

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

routes

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

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

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

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

因為路由是項目中的一個非常獨立的模塊，因此，在實例化路由對象時，通過會在項目的src目錄下，創(chuàng)建一個名稱為router的單獨文件夾，并在文件夾中新建一個名稱為index的.js文件，用于保存和導出創(chuàng)建完成的路由對象。構建路由結構

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