一起學學Vue Router 4.X開發中用到的新特性

前言：

vue3發布這么久以來，還沒好好梳理過它相關的全家桶，今天我們先聊聊Vue Router 4.X的使用以及新特性！

可以說路由是一個簡單又復雜的東西，簡單指的是我們日常使用的過程中只是不斷的調用它的API,復雜則是我們有的需求場景需要結合路由原理去處理數據等問題，此時我們就不得不對其原理有很深的理解，例如對于History模式和hash模式到底有什么區別，使用history需要做那些處理？他是如何不刷新頁面更改我們的路由地址的等等！

一、安裝并使用

// 安裝vue-router@4 - 可以根據自己的工具使用安裝
yarn add vue-router@4

// 使用vue-router@4
// 使用vue創建的app安裝我們對應的路由。具體路由配置參考目錄（二）
vueApp.use(router); // 前提是我們已經配置好了路由并使用createRouter生成了我們的路由對象

二、聲明路由

import VueRouter from "vue-router";

// 1. 定義路由組件.
// 也可以從其他文件導入
// 此處的邏輯，大佬一點的都知道，其實我們的vue組件其實就是一個對象，每個vue組件中其實都有template，我就不多做獻丑。
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定義一些路由
// 每個路由都需要映射到一個組件。
// 我們后面再討論嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 創建路由實例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們在這里
// 暫時保持簡單
const router = VueRouter.createRouter({
  // 4. 內部提供了 history 模式的實現。為了簡單起見，我們在這里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的縮寫
})

// 去使用router

路由管理配置也是個學問，當我們的項目龐大以后如何還能保證我們的路由清晰且高維護？？？

三、createRouter的變化

#createWebHistory

export declare function createWebHistory(base?: string): RouterHistory

此方法創建一個最常見的歷史記錄。

還有SEO對我們很重要的時候我們需要使用此函數創建路由！！！

它的參數表示我們的資源訪問存儲在服務器的具體位置

createWebHistory('/goods/') // 表示我們需要使用http://127.0.0.1/goods/xxx去訪問我們的項目,此處的ip可以是我們服務器的域名或者本地的服務端口名稱，它一定是由http提供服務的！

#createWebHashHistory

export declare function createWebHashHistory(base?: string): RouterHistory

方法參數與createWebHistory出入不大，但是此處如果我們沒有提供hash標識他會自動為我們的路由加上 ’#‘

createWebHashHistory('/folder/') // 給出的網址為 `https://baidu.com/folder/#`

createWebHashHistory('/folder/#/app') // 給出的網址為 `https://baidu.com/folder/#/app`
// at file:///base/index.html
createWebHashHistory('/file') // 給出的網址為 `file:///base/index.html#`

此方式支持file:///xxx 的訪問方式，但是會忽略掉我們的base參數。

#createMemoryHistory

export declare function createMemoryHistory(base?: string): RouterHistory

此方法創建一個基于內存的歷史紀錄，通常是為了處理我們的SSR的時候使用的，它可以在任意位置開始，判斷上下文中不存在則直接調用push or replace直接將當前位置設為開始位置！

四、其他要點

impot {
    START_LOCATION,
    useRouter,
    useRoute
} from 'vue-router'; 


START_LOCATION // 主要用于判斷我們路由初始的位置信息,與守衛路由中的from是相等的 ！

useRouter() // 獲取路由的能力調用其返回值可以使用路由api 類似以前的this.$router;

useRoute() // 獲取當前頁面的路由信息，包含query,params，meta等數據信息。

// tips 還有我們需要對路由全局路由編碼以及解碼自定義的時候可以在createRouter的時候 parseQuery,stringifyQuery,去做一個全局的配置！

posted @ 2023-03-21 16:11 鍵盤的旋律閱讀(187) 評論(0) 收藏舉報

刷新頁面返回頂部

鍵盤的旋律

一起學學Vue Router 4.X開發中用到的新特性

公告