当我在创建 VUE3 的项目的路由的时候,在index.js文件里面,有这样一段代码
js
//创建路由实例
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
以往我们都是通过 AI 直接帮我们生成,那这次我们要好好的探究一下这段代码到底是做了什么东西
1. history: createWebHistory(...)
是做什么的?
这份指令是告诉你的"导航总监",他应该用什么模式 (Mode) 来管理网站的浏览历史和 URL 地址。
vue-router
主要提供两种模式:
-
createWebHistory
(我们用的这种)-
作用: 启用 HTML5 History 模式。这是最现代、最常用、看起来最正常的模式。
-
URL 效果: 你网站的地址看起来会非常干净、标准,就像这样:
http://yoursite.com/
http://yoursite.com/projects
http://yoursite.com/about
-
比喻: 就像在城市里沿着真实的马路开车,地址就是真实的街道名。
-
-
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
的作用就是把你辛苦定义的所有路径规则(哪个路径对应哪个页面),正式地交给"导航总监",让他知道网站里有哪些页面可以访问,以及如何访问它们。