Vue3 是目前比较盛行的前端框架之一，它提供了很多方便的 API 来帮助我们开辟高效、可维护的应用步调。在利用 Vue Router 进行路由管理时，我们可以利用 createWebHistory 和 createWebHashHistory 来创建不同范例的路由模式。本文将介绍这两种模式的区别和如何选择符合的模式。
createWebHistory
createWebHistory 是 Vue Router 提供的一种基于欣赏器 history API 的路由模式，它利用了 HTML5 中的 history.pushState 和 history.replaceState 方法来实现路由跳转。这种模式可以使得 URL 更加直观，而且不会在 URL 中添加任何特殊字符。比方，我们可以将路由设置为 /home、/about 等等。
利用 createWebHistory 可以通过以下方式创建一个路由：
- import { createRouter, createWebHistory } from 'vue-router'
- import Home from '@/views/Home.vue'
- import About from '@/views/About.vue'
- const router = createRouter({
- history: createWebHistory(),
- routes: [
- {
- path: '/home',
- name: 'home',
- component: Home
- },
- {
- path: '/about',
- name: 'about',
- component: About
- }
- ]
- })
在利用 createWebHistory 时，必要在服务器端进行一些设置。由于利用了 history API，如果直接在欣赏器中革新或直接访问某个路由，服务器将无法识别该路由，并返回 404 错误。因此，必要在服务器端设置，将全部的路由请求都返回顾页，再由前端代码进行路由的匹配和处理处罚。
createWebHistory 只支持 HTML5 尺度欣赏器，对于老版本的欣赏器无法利用。
在开辟环境下，我们必要将 webpack 的 historyApiFallback 属性设置为 true，以便在开辟环境下正常利用路由。
createWebHashHistory
createWebHashHistory 是 Vue Router 提供的一种基于欣赏器 URL 的 hash 路由模式，它将路由添加到 URL 中的 hash 中，比方：/#/home、/#/about。这种模式可以制止服务器设置的标题，而且支持全部欣赏器。但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些标题。
利用 createWebHashHistory 可以通过以下方式创建一个路由：
- import { createRouter, createWebHashHistory } from 'vue-router'
- import Home from '@/views/Home.vue'
- import About from '@/views/About.vue'
- const router = createRouter({
- history: createWebHashHistory(),
- routes: [
- {
- path: '/home',
- name: 'home',
- component: Home
- },
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
