[知识点记录]createWebHistory的用法

当我在创建 VUE3 的项目的路由的时候,在index.js文件里面,有这样一段代码

//创建路由实例
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
})

以往我们都是通过 AI 直接帮我们生成,那这次我们要好好的探究一下这段代码到底是做了什么东西

1. history: createWebHistory(...) 是做什么的？

这份指令是告诉你的"导航总监"，他应该用什么模式 (Mode) 来管理网站的浏览历史和 URL 地址。

vue-router 主要提供两种模式：

1. createWebHistory (我们用的这种)

   • 作用： 启用 HTML5 History 模式。这是最现代、最常用、看起来最正常的模式。

   • URL 效果： 你网站的地址看起来会非常干净、标准，就像这样：

     • http://yoursite.com/
     • http://yoursite.com/projects
     • http://yoursite.com/about

   • 比喻： 就像在城市里沿着真实的马路开车，地址就是真实的街道名。

2. createWebHashHistory (另一种模式)

   • 作用： 启用 Hash 模式。

   • URL 效果： 你的网站地址里会多一个 # (井号)。

     • http://yoursite.com/#/
     • http://yoursite.com/#/projects
     • http://yoursite.com/#/about

   • 比喻： 就像在景区里乘坐特定的观光小火车 ，小火车只在带 # 的轨道上跑。这是一种兼容性更好、但略显过时的方式。

所以，createWebHistory() 的作用就是告诉路由器："请使用现代化的、干净的 URL 模式来工作。"

---

2. 它的参数 import.meta.env.BASE_URL 又是什么？

这个参数看起来最复杂，但其实最简单。

• import.meta.env.BASE_URL 是 Vite (我们的构建工具) 提供的一个环境变量。
• 在绝大多数情况 下，它的值就是 '/'，代表你网站的根目录。

这个参数的作用是，告诉你网站的基础路径是什么。比如，如果你的网站不是部署在 https://example.com/，而是部署在一个子目录下，例如 https://example.com/my-portfolio/，那么 BASE_URL 就会是 /my-portfolio/。

简单来说，你完全不需要修改它。 它就是一句标准配置，告诉路由器"我们的网站从根目录开始"，这能确保你的网站在部署后路由也能正常工作。

---

3. 最后那个 routes 是做什么的？

这是给"导航总监"的第二份、也是最重要的指令：一份完整的"网站地图"和"交通规则" 。

• routes 的左边 (routes:)：这是 createRouter 配置对象里的一个属性名，意思是"我要在这里提供路由规则"。
• routes 的右边 ：这是我们在这段代码上方 定义的那个包含了所有路由规则的常量数组。

JavaScript

// 我们在上面定义了这个常量
const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
  // ... 其他所有规则
]

// 然后在这里使用它
const router = createRouter({
  history: ...,
  routes: routes // 完整写法是这样
})

因为在现代 JavaScript (ES6) 中，如果一个对象的属性名和你要赋给它的变量名完全相同，你就可以简写 。所以 routes: routes 就直接简写成了 routes。

所以，routes 的作用就是把你辛苦定义的所有路径规则（哪个路径对应哪个页面），正式地交给"导航总监"，让他知道网站里有哪些页面可以访问，以及如何访问它们。