Vue路由

• 2022 年 7 月 18 日
• 筆記
• javascript

單頁應用程序(SPA)：通過路由系統把組件串聯起來並且只有一個html頁面d的程序。

多頁面應用程序(MPA)：整個應用程序中有多個html頁面。

hash路由和history路由的區別

hash路由有#。背後是監聽onhashchange事件實現的，hash路由部署上線不會出現404.

history路由沒有#，背後是基於history api實現的，histo路由部署上線會出現404問題.

<router-view>和<router-link>(全局組件)

<router-view>視圖容器:name屬性用於指定命令視圖。

<router-link>用於設計菜單導航：to屬性用於指定跳轉的目標，tag屬性用於指定渲染什麼標籤，默認渲染a標籤，active-class/exact-active-class用於指定菜單的高亮樣式。

$route和$router(內置API)

$route路由信息：this.$route.fullPath/query/params/meta（watch可以監聽$route的變化）

$router路由實例：用於路由跳轉，this.$router.push()向前跳轉，this.$router.replace()向前跳轉，this.$router.back()返回上一次。

聲明式跳轉和編程式跳轉

聲明式跳轉：就是使用<router-link>跳轉，一般用於菜單設計。

編程式跳轉：就是使用$router跳轉，一般用於事件中。

命名視圖和命名路由

命名視圖是給<router-view>加一個name屬性。

命名路由是給{path,component}路由規則取個名字。

query傳參和動態路由傳參

query傳參：在跳轉路由的url後面用?a=1&b=2這種方式傳參，在另一個組件中使用this.$router.query接收。

動態路由傳參：像這樣`{path:’/good/:id’,component}`定義路由規則，在這條路由規則中使用this.$route.params接收或者開啟props:true使用props選項來接收。