Vue3刷新頁面報(bào)錯(cuò)404的解決方法
vue-router歷史模式
最近在學(xué)習(xí)Vue3的過程中遇到了一個(gè)問題，那就是在寫代碼的過程中，每當(dāng)代碼發(fā)生了變動，頁面一刷新，原先的頁面就會變成這個(gè)樣子：
打開控制臺一看：
這時(shí)候刷新、在瀏覽器地址欄直接輸入地址也不管用。 每次寫一點(diǎn)代碼，都不能及時(shí)看到結(jié)果，需要從8080重新進(jìn)入才可以，其中的崩潰可想而知。 此時(shí)判斷應(yīng)該是路由跳轉(zhuǎn)的問題，于是來到router.js文件看一看：
import {
createRouter,
createWebHistory
} from 'vue-router'
// import Home from '../views/Home.vue'
const Home = () => import('../views/home/Home');
const Category = () => import('../views/category/Category');
const Detail = () => import('../views/detail/Detail');
const Profile = () => import('../views/profile/Profile');
const Shopcart = () => import('../views/shopcart/Shopcart');
const routes = [{
path: '/home',
name: 'Home',
component: Home,
meta: {
title: '圖書兄弟'
}
},
{
path: '/',
name: 'Default',
component: Home,
meta: {
title: '圖書兄弟'
}
},
{
path: '/category',
name: 'Category',
component: Category,
meta: {
title: '商品分類'
}
},
{
path: '/detail',
name: 'Detail',
component: Detail,
meta: {
title: '商品詳情'
}
},
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: {
title: '個(gè)人中心'
}
},
{
path: '/shopcart',
name: 'Shopcart',
component: Shopcart,
meta: {
title: '購物車'
}
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
// 如果沒有登錄，到login
next();
document.title = to.meta.title;
})
export default router感覺沒啥問題，仔細(xì)檢查了自己寫的代碼部分，沒有發(fā)現(xiàn)問題，于是更納悶了，難道是自動生成的代碼出現(xiàn)了問題？ 經(jīng)過一翻排查，發(fā)現(xiàn)原來是vue-router歷史模式的問題： vue3中歷史模式默認(rèn)改為了HTML5模式：createWebHistory()
當(dāng)使用這種歷史模式時(shí)，URL 會看起來很 "正常"，例如 https://example.com/user/id。 不過，問題來了。由于我們的應(yīng)用是一個(gè)單頁的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問 https://example.com/user/id，就會得到一個(gè) 404 錯(cuò)誤。 這就是一直折磨我的罪魁禍?zhǔn)祝?/strong>
Vue-router官方給出的解決方案是：
要解決這個(gè)問題，你需要做的就是在你的服務(wù)器上添加一個(gè)簡單的回退路由。如果 URL 不匹配任何靜態(tài)資源，它應(yīng)提供與你的應(yīng)用程序中的 index.html 相同的頁面。
這涉及到服務(wù)器的配置，由于我的項(xiàng)目還在開發(fā)階段，所以這種解決方式暫時(shí)不能用。所幸還有其他的解決方案，那就是將歷史模式由當(dāng)前的HTML5模式改為Hash模式：
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})表現(xiàn)在代碼上就是兩個(gè)createWebHistory換成了createWebHashHistory，這樣就完成了修改。
修改完成后重新啟動項(xiàng)目：
npm run serve
此時(shí)刷新頁面也不會報(bào)404了，大功告成！
詳細(xì)解決方法請移步vue-router官網(wǎng)“不同的歷史記錄模式”部分： router.vuejs.org/zh/guide/essentials/history-mode.html
到此這篇關(guān)于Vue3刷新頁面報(bào)錯(cuò)404的解決方法的文章就介紹到這了,更多相關(guān)Vue3刷新頁面報(bào)錯(cuò)404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在項(xiàng)目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼
這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue3在router中使用store報(bào)錯(cuò)的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯(cuò)解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3.0使用taro-ui-vue3引入組件不生效的問題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Vite批量導(dǎo)入模塊/資源的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
element?table?數(shù)據(jù)量大頁面卡頓的解決
這篇文章主要介紹了element?table?數(shù)據(jù)量大頁面卡頓的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01