前言

Vue3 是目前比較流行的前端框架之一，它提供了很多方便的 API 來幫助我們開發(fā)高效、可維護的應用程序。在使用 Vue Router 進行路由管理時，我們可以使用 createWebHistory 和 createWebHashHistory 來創(chuàng)建不同類型的路由模式。本文將介紹這兩種模式的區(qū)別和如何選擇合適的模式。

createWebHistory

createWebHistory 是 Vue Router 提供的一種基于瀏覽器 history API 的路由模式，它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法來實現(xiàn)路由跳轉。這種模式可以使得 URL 更加直觀，而且不會在 URL 中添加任何特殊字符。例如，我們可以將路由設置為 /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 時，需要注意以下幾點：

在使用 createWebHistory 時，需要在服務器端進行一些配置。因為使用了 history API，如果直接在瀏覽器中刷新或直接訪問某個路由，服務器將無法識別該路由，并返回 404 錯誤。因此，需要在服務器端配置，將所有的路由請求都返回首頁，再由前端代碼進行路由的匹配和處理。

createWebHistory 只支持 HTML5 標準瀏覽器，對于老版本的瀏覽器無法使用。

在開發(fā)環(huán)境下，我們需要將 webpack 的 historyApiFallback 屬性設置為 true，以便在開發(fā)環(huán)境下正常使用路由。

createWebHashHistory

createWebHashHistory 是 Vue Router 提供的一種基于瀏覽器 URL 的 hash 路由模式，它將路由添加到 URL 中的 hash 中，例如：/#/home、/#/about。這種模式可以避免服務器配置的問題，而且支持所有瀏覽器。但是，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 優(yōu)化中存在一些問題。

使用 createWebHashHistory 可以通過以下方式創(chuàng)建一個路由：

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
    },

補充：Vue使用createWebHistory 頁面刷新變成白頁 解決

Vue使用createWebHistory 頁面刷新變成白頁 解決辦法

hash模式時，項目的根目錄是不變的，而在history模式時，以/開頭的嵌套路徑會被當做根據(jù)經。

所以更改文件webpack.prod.config.js(publicPath從’./‘更改為’/’)即可解決此問題

總結

到此這篇關于Vue3中createWebHistory和createWebHashHistory區(qū)別詳析的文章就介紹到這了,更多相關createWebHistory和createWebHashHistory區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論