欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析

 更新時(shí)間：2023年06月01日 11:31:05   作者：weixin_44917334  
這篇文章主要給大家介紹了關(guān)于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

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

createWebHistory

createWebHistory 是 Vue Router 提供的一種基于瀏覽器 history API 的路由模式，它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)。這種模式可以使得 URL 更加直觀，而且不會(huì)在 URL 中添加任何特殊字符。例如，我們可以將路由設(shè)置為 /home、/about 等等。

使用 createWebHistory 可以通過(guò)以下方式創(chuàng)建一個(gè)路由：

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 時(shí)，需要注意以下幾點(diǎn)：

在使用 createWebHistory 時(shí)，需要在服務(wù)器端進(jìn)行一些配置。因?yàn)槭褂昧?history API，如果直接在瀏覽器中刷新或直接訪問(wèn)某個(gè)路由，服務(wù)器將無(wú)法識(shí)別該路由，并返回 404 錯(cuò)誤。因此，需要在服務(wù)器端配置，將所有的路由請(qǐng)求都返回首頁(yè)，再由前端代碼進(jìn)行路由的匹配和處理。

createWebHistory 只支持 HTML5 標(biāo)準(zhǔn)瀏覽器，對(duì)于老版本的瀏覽器無(wú)法使用。

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

createWebHashHistory

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

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

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

補(bǔ)充：Vue使用createWebHistory 頁(yè)面刷新變成白頁(yè) 解決

Vue使用createWebHistory 頁(yè)面刷新變成白頁(yè) 解決辦法

hash模式時(shí)，項(xiàng)目的根目錄是不變的，而在history模式時(shí)，以/開(kāi)頭的嵌套路徑會(huì)被當(dāng)做根據(jù)經(jīng)。

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

總結(jié)

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

相關(guān)文章

最新評(píng)論