[知识点记录]createWebHistory的用法

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

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

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

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

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

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

相关推荐
万少12 小时前
可可图片编辑 HarmonyOS(3)应用间分享图片
前端·harmonyos·客户端
Hy行者勇哥12 小时前
现代软件系统架构:前端、后端、数据库、部署、算法与AI学习的结构与交互分析
前端·数据库·学习
前端开发爱好者13 小时前
90% 前端都不知道的 20 个「零依赖」浏览器原生能力!
前端·javascript·vue.js
讨厌吃蛋黄酥13 小时前
React语法全景指南:面试官问我用了哪些语法时,我这样回答拿到了offer
前端·react.js·面试
Bling_Bling_113 小时前
面试常考css:三列布局实现方式
前端·html·css3
讨厌吃蛋黄酥14 小时前
Promise的底层揭秘:微任务与观察者模式的完美共舞
前端·javascript·面试
月下点灯14 小时前
一探究竟bilibili自动进入画中画视频小窗继续播放
前端·javascript·html
咔咔一顿操作14 小时前
第五章 vue3 + Three.js 实现高级镜面反射效果案例解析
前端·javascript·vue.js·人工智能·信息可视化·threejs
码上心间15 小时前
树形结构后端构建
java·前端·javascript·vue.js