使用Vue Router（Vue.js 的官方路由管理器）为您的Vue 应用程序配置路由。
从\’vue-router\’ 导入{ createRouter, createWebHistory }
常量路由器=createRouter({
History: createWebHistory(import.meta.env.BASE_URL),
路线： [
{
路径：\’/\’,
重定向：\’/home\’
},
{
路径： \’/home\’,
name: \’家\’,
组件：()=import(\’@/views/HomeView.vue\’)
},
{
路径： \’/关于\’,
name: \’关于\’,
组件： ()=import(\’./views/AboutView.vue\’)
}
]
})
导出默认路由器
导入所需模块
从\’vue-router\’ 导入{ createRouter, createWebHistory }
从vue-router 包中导入了两个函数：createRouter 和createWebHistory。 createRouter用于创建新的路由实例，createWebHistory用于创建基于HTML5历史记录模式的路由实例。
2.创建路由实例
常量路由器=createRouter({
.
使用createRouter 函数创建一个新的路由实例并将其分配给router 变量。
3. 设置路由历史模式。
History: createWebHistory(import.meta.env.BASE_URL),
这里，路由历史模式设置为基于HTML5的历史模式(也称为“HTML5历史模式”)。这意味着Vue Router 使用HTML5 History API 来管理URL，而不是传统的哈希模式（例如#/home）。
import.meta.env.BASE_URL 是Vite 或Vue CLI 提供的环境变量，通常表示应用程序的基本URL。但是，这里不需要此参数，因为createWebHistory 函数仅创建一个新的历史记录实例，并且不考虑应用程序的基本URL。因此，除非有特殊目的，否则可能不需要此参数。
4. 定义路线
路由数组定义要应用的路由规则。
* 第一条路由规则：
“JavaScript
{
路径：\’/\’,
重定向：\’/home\’
}
””
当用户访问应用程序的根路径（“/”）时，他们会被重定向到“/home”路径。
*第二条路由规则：
“JavaScript
{
路径： \’/home\’,
name: \’家\’,
组件：()=import(\’@/views/HomeView.vue\’)
}
””
当用户访问“/home”路径时，会显示“HomeView.vue”组件。这里使用动态导入（`import()`）。这意味着该组件仅在需要时才会加载。 “@”符号通常是指向项目的“src”目录的别名（这根据项目的配置而变化）。
*第三条路由规则：
“JavaScript
{
路径： \’/关于\’,
name: \’关于\’,
组件： ()=import(\’./views/AboutView.vue\’)
}
””
该路由规则与第二条规则类似，但它是针对`/about` 路径定义的，并直接使用相对路径导入`AboutView.vue` 组件。 5. 导出路由实例
导出默认路由器
最后，导出此根实例以供Vue 应用程序的其他部分使用。
HTML5 History API 与传统的哈希模式（例如 #/home）在前端路由管理中的区别
网址表达：
HTML5 History API：使用标准URL 路径，例如/home 和/about，不带# 符号。这种形式的URL更适合用户习惯和搜索引擎优化（SEO）要求。哈希模式：在URL 中使用# 符号来模拟路由，例如#/home 或#/about。 #下面的部分称为哈希片段，不会发送到服务器，只存在于浏览器内部。工作原理：
HTML5 History API：使用HTML5 提供的History API 管理您的浏览器历史记录。如果URL 路径发生更改，请使用JavaScript PushState 或ReplaceState 方法添加或更改历史记录条目，而无需重新加载整个页面。浏览器根据这些历史条目加载相应的页面内容，但需要服务器端支持来处理不在主页上的URL请求。 Hash模式：通过改变URL的Hash片段来触发页面内容加载。 JavaScript 可以监听hashchange 事件来检测URL 变化，并根据hash 片段的不同值加载相应的页面内容。哈希路由不需要服务器端支持，因为哈希片段的更改不会触发页面刷新或向服务器发送请求。兼容性和搜索引擎优化：
HTML5 History API：浏览器必须支持HTML5 History API，因此它可能无法在某些较旧的浏览器中正常工作。然而，它提供了一个更漂亮的URL，这对于SEO和用户体验来说更好。哈希模式：高度兼容，适用于不支持HTML5 History API 的浏览器。但是，URL 中包含# 符号，这会影响SEO 性能和用户体验。实施细节：
在HTML5 History API 模式下，当用户单击链接或执行其他导航操作时，JavaScript 会通过PushState 或ReplaceState 方法更改URL 并更新页面内容。浏览器的“前进”和“后退”按钮也可以工作，因为它们是根据浏览器的历史记录工作的。在哈希模式下，当用户单击链接时，JavaScript 会更改window.location.hash 属性，从而更改URL 的哈希片段。然后JavaScript 监听hashchange 事件来检测URL 变化，并根据hash 片段的不同值加载相应的页面内容。
总而言之，HTML5 History API 提供了一种更现代、更美观的URL 管理方式，但需要服务器端支持和改进的浏览器兼容性。 Hash模式具有更好的兼容性，但URL表示和SEO效果可能不如HTML5 History API。选择使用哪种模式时，应考虑项目需求、目标用户组、服务器配置等因素。
在Vue Router 中，当您使用createWebHistory 方法时，Vue Router 使用HTML5 History API 来管理URL。这意味着URL 不包含#（井号），看起来像常规网页链接。
哈希模式是Vue Router 中的默认模式，但HTML5 历史记录模式可以让你获得更多“正常”的URL，这些URL 更有利于搜索引擎优化(SEO) 和用户体验（例如，通过直接访问具有Shareable (URL) 的页面有其优点。
但需要注意的是，在历史模式下，如果服务器配置不正确，用户直接访问深层链接（如/user/123）时可能会遇到404错误。因为服务器通常不知道如何。我们将回应此类请求。为了避免此问题，您必须确保服务器为所有路由返回相同的index.html 文件。然后，Vue Router 接管客户端并显示正确的视图。
使用Vue CLI 创建的项目通常会配置一个开发服务器（例如webpack-dev-server）来自动处理此问题。但是，在生产环境中，您需要自行配置服务器以确保正确运行。
以上关于#vue3路由配置的相关内容由网络提供，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91967.html
