目錄

1. Hash模式和History模式

2. 導航守衛(wèi)

3. 路由元信息

4.路由懶加載

---

1. Hash模式和History模式

Hash模式（哈希模式）和History模式（歷史模式）是匹配路由的兩種模式，一般默認配置Hash模式，可以在index.js頁面中將路由匹配的模式換為哈希模式

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 使用哈希模式需要導入createWebHashHistory
import HomeView from '../views/HomeView.vue'const router = createRouter({// 歷史模式history: createWebHistory(import.meta.env.BASE_URL),// 哈希模式history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}]
});

哈希模式和歷史模式的區(qū)別:

• 哈希模式下地址欄中有#號標識，歷史模式下則沒有#號標識，但兩者的傳參方式是一樣的
• 在項目打包之前，我們在開發(fā)者模式下是觀察不到哈希模式和歷史模式的區(qū)別的，但是當項目打包后我們會發(fā)現(xiàn)當我們嘗試進入一個不存在的頁面時，歷史模式會向后端發(fā)送請求，因為瀏覽器沒有匹配到路由組件，所以向服務器發(fā)送請求頁面去了，這種情況下控制臺會出現(xiàn)404報錯，要想讓控制臺不報錯得加后端配置，如果服務器不存在這個地址就把原頁面返回，不要出現(xiàn)404錯誤，而哈希模式就不會出現(xiàn)這個問題，因為他有#表示，瀏覽器不會當成url向服務器請求的。

2. 導航守衛(wèi)

導航守衛(wèi)就是路由跳轉(zhuǎn)中的一個攔截器。全局前置守衛(wèi)：所有路由跳轉(zhuǎn)前都會先經(jīng)過這個守衛(wèi)的攔截。beforeEach內(nèi)部返回false表示不同意跳轉(zhuǎn)；返回true同意跳轉(zhuǎn)。

router.beforeEach((to, from,next) => {// to：目的地頁面路由 from:當前要切換的路由// 返回false以取消導航// 一般需要授權驗證的頁面才需要攔截，其他頁面直接放行。if (to.path == '/about') {if (localStorage.getItem('token')) next();//已登錄，允許跳轉(zhuǎn)else {console.log('請先登錄');next(`/login?target=${to.path}`)//跳轉(zhuǎn)登錄頁面}}// return falseelse {next();//使用了next參數(shù)就不再使用返回值true/false來決定是否跳轉(zhuǎn)。因為next()不帶參數(shù)等價于return true,允許跳轉(zhuǎn)}// 保證任意條件下next只執(zhí)行一次 ?})

3. 路由元信息

在 Vue Router 中，路由元信息（Route Meta Fields）是一種用于給路由添加額外信息的方式。通過路由元信息，我們可以為每個路由定義一些自定義的數(shù)據(jù)，這些數(shù)據(jù)可以在路由導航守衛(wèi)和組件中訪問，從而實現(xiàn)更靈活的路由控制和處理。我們可以將自定義的數(shù)據(jù)寫道 meta里面。

 routes: [{path: '/',name: 'home',component: HomeView,// meta自定義路由參數(shù)只能寫在這里面meta: {// 路由元信息，主要是給路由設置自定義參數(shù)。isAuth:true,}}]

可以用來認證進入該頁面是否需要登錄，給需要登陸的頁面都加上isAuth，然后在導航守衛(wèi)中通過isAuth來判斷。

4.路由懶加載

主要用來優(yōu)化代碼體積，當我們使用npm run build命令將項目打包放到服務器時，使用路由懶加載來優(yōu)化代碼體積可以提高用戶的體驗，

之前我們導入組件使用的都是同步導入的方式，在首次加載頁面時，這些組件內(nèi)容都一并被瀏覽器加載了，當入口js文件體積變大時，瀏覽器加載和解析的速度就會變慢，首屏加載時間就會延長，用戶體驗不好，可能會長時間處于白屏階段。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({// 歷史模式history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,// meta自定義路由參數(shù)只能寫在這里面}]
});export default router

但是現(xiàn)在我們可以使用路由的懶加載來導入組件，將每一個組件單獨打包一個js/css文件，當用戶訪問路由了，再加載對應的?js文件，減輕了入口js的代碼體積，解析和加載速度就快了，首屏加載事件也縮短了，從而提高用戶的體驗。

        {path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}