Vue實(shí)現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號url)
Vue實(shí)現(xiàn)hash模式網(wǎng)址
src\js\main.js
...
const router = new VueRouter({
...
mode: 'hash', //hash模式網(wǎng)址，帶#井號
// mode: 'history', // 這里存在一個弊端，如果要去掉路由的#號，需要后端配合配置，否則刷新頁面就會報錯404，反正如果不是非得要做支付建議不用這個參數(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 中的 # 符號
模式二：mode:‘history’
一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 URL 里看起來不美觀。
使用 history 模式時，URL 就像正常的 url，不過這種模式還需要后臺配置支持。
問題：
開發(fā)環(huán)境下，路由不管選用hash模式還是history模式都不會出問題，但打包后放在服務(wù)器上history模式會出現(xiàn)頁面一片空白的情況,而且沒有資源加載錯誤的報錯信息.。
原因：
1、后臺配置支持是否支持：history，是需要后臺配置支持的。原理是要在服務(wù)端增加一個覆蓋你的路由內(nèi)所有情況的候選資源，如果 URL 匹配不到任何候選資源，則定位到打包好的 index.html 頁面，這個頁面就是你 app 依賴的頁面。
后端配置鏈接：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ù)器的根目錄, 那么是沒有問題的,base不需要配置。如果項(xiàng)目代碼是放在服務(wù)器的子目錄,需要加一個base配置項(xiàng)，里面配置項(xiàng)目代碼在服務(wù)器內(nèi)的路徑。
【我的代碼放在/WebTest/Vue/bigscreen】
**vue.config.js**
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了VUE預(yù)渲染及遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄類型切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue滾動tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個普通對象轉(zhuǎn)換為響應(yīng)式對象,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個樣式出現(xiàn)時，就會導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue+element-ui+axios實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+axios實(shí)現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
解決$store.getters調(diào)用不執(zhí)行的問題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11