Vue實(shí)現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號(hào)url)
Vue實(shí)現(xiàn)hash模式網(wǎng)址
src\js\main.js
...
const router = new VueRouter({
...
mode: 'hash', //hash模式網(wǎng)址，帶#井號(hào)
// mode: 'history', // 這里存在一個(gè)弊端，如果要去掉路由的#號(hào)，需要后端配合配置，否則刷新頁(yè)面就會(huì)報(bào)錯(cuò)404，反正如果不是非得要做支付建議不用這個(gè)參數(shù)配置，參考文檔：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
...
});
...hash模式下網(wǎng)址形如
- http://127.0.0.1/#/home
- http://localhost/#/home
Vue路由中hash模式
import Vue from 'vue'
import Router from 'vue-router'
import { router } from './router/index'
Vue.use(Router)
export default new Router({
mode: 'history',
// mode: 'hash',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: router
})模式一：mode:‘hash’
hash —— 即地址欄 URL 中的 # 符號(hào)
模式二：mode:‘history’
一般場(chǎng)景下，hash 和 history 都可以，除非你更在意顏值，# 符號(hào)夾雜在 URL 里看起來(lái)不美觀。
使用 history 模式時(shí)，URL 就像正常的 url，不過(guò)這種模式還需要后臺(tái)配置支持。
問(wèn)題：
開(kāi)發(fā)環(huán)境下，路由不管選用hash模式還是history模式都不會(huì)出問(wèn)題，但打包后放在服務(wù)器上history模式會(huì)出現(xiàn)頁(yè)面一片空白的情況,而且沒(méi)有資源加載錯(cuò)誤的報(bào)錯(cuò)信息.。
原因：
1、后臺(tái)配置支持是否支持：history，是需要后臺(tái)配置支持的。原理是要在服務(wù)端增加一個(gè)覆蓋你的路由內(nèi)所有情況的候選資源，如果 URL 匹配不到任何候選資源，則定位到打包好的 index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。
后端配置鏈接：https://router.vuejs.org/zh/guide/essentials/history-mode.html
2、前端配置：
router/index.js
export default new Router({
? mode: 'history',
? // mode: 'hash',
? base: '/WebTest/Vue/bigscreen/dist',
? routes: router
})mode配置成hostory
如果項(xiàng)目代碼直接放在服務(wù)器的根目錄, 那么是沒(méi)有問(wèn)題的,base不需要配置。如果項(xiàng)目代碼是放在服務(wù)器的子目錄,需要加一個(gè)base配置項(xiàng)，里面配置項(xiàng)目代碼在服務(wù)器內(nèi)的路徑。
【我的代碼放在/WebTest/Vue/bigscreen】
**vue.config.js**
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?結(jié)合webpack的初級(jí)使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級(jí)使用指南非常適合入門webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本篇文章主要介紹了Vue 中批量下載文件并打包的示例代碼，用 ajax 將文件下載, 然后用 jszip 壓縮文件, 最后用 file-saver 生成文件，有興趣的可以了解一下2017-11-11
Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
本文主要介紹了Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
解決vue-cli 配置資源引用的絕對(duì)路徑問(wèn)題
這篇文章主要介紹了vue-cli 配置資源引用的絕對(duì)路徑的問(wèn)題，本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
vue指令v-html使用過(guò)濾器filters功能實(shí)例
在本篇文章里我們給大家整理的是關(guān)于vue指令v-html使用過(guò)濾器filters功能的實(shí)例內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue使用laydate時(shí)間插件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue中實(shí)現(xiàn)圖片壓縮 file文件的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)圖片壓縮 file文件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vite多環(huán)境配置項(xiàng)目高定制化能力詳解
這篇文章主要為大家介紹了Vite多環(huán)境配置項(xiàng)目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03