Vue3 是目前比較流行的前端框架之一，它提供了很多方便的 API 來幫助我們開發(fā)高效、可維護(hù)的應(yīng)用程序。在使用 Vue Router 進(jìn)行路由管理時，我們可以使用 createWebHistory 和 createWebHashHistory 來創(chuàng)建不同類型的路由模式。本文將介紹這兩種模式的區(qū)別和如何選擇合適的模式。
createWebHistory
createWebHistory 是 Vue Router 提供的一種基于瀏覽器 history API 的路由模式，它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法來實(shí)現(xiàn)路由跳轉(zhuǎn)。這種模式可以使得 URL 更加直觀，而且不會在 URL 中添加任何特殊字符。例如，我們可以將路由設(shè)置為 /home、/about 等等。
使用 createWebHistory 可以通過以下方式創(chuàng)建一個路由：
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 時，需要注意以下幾點(diǎn)：
在使用 createWebHistory 時，需要在服務(wù)器端進(jìn)行一些配置。因?yàn)槭褂昧?history API，如果直接在瀏覽器中刷新或直接訪問某個路由，服務(wù)器將無法識別該路由，并返回 404 錯誤。因此，需要在服務(wù)器端配置，將所有的路由請求都返回首頁，再由前端代碼進(jìn)行路由的匹配和處理。
createWebHistory 只支持 HTML5 標(biāo)準(zhǔn)瀏覽器，對于老版本的瀏覽器無法使用。
在開發(fā)環(huán)境下，我們需要將 webpack 的 historyApiFallback 屬性設(shè)置為 true，以便在開發(fā)環(huán)境下正常使用路由。
createWebHashHistory
createWebHashHistory 是 Vue Router 提供的一種基于瀏覽器 URL 的 hash 路由模式，它將路由添加到 URL 中的 hash 中，例如：/#/home、/#/about。這種模式可以避免服務(wù)器配置的問題，而且支持所有瀏覽器。但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 優(yōu)化中存在一些問題。文章來源：http://www.zghlxwxcb.cn/news/detail-445576.html
使用 createWebHashHistory 可以通過以下方式創(chuàng)建一個路由：文章來源地址http://www.zghlxwxcb.cn/news/detail-445576.html
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
},
到了這里，關(guān)于Vue3 中 createWebHistory 和 createWebHashHistory 的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
