Vue 去除路徑中的＃號(hào)
更新時(shí)間：2018年04月19日 14:24:35 作者：你是豬嗎是嗎是嗎是嗎是嗎
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來(lái)給大家?guī)?lái)了Vue 去除路徑中的＃號(hào)的解決方法，感興趣的朋友一起看看吧
在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示，而且還去不掉，很丑陋。
眾所周知，vue-router有兩種模式，hash模式和history模式。
帶＃的則是hash模式。
將router中的mode設(shè)置為history就可以了
接下來(lái)有個(gè)問(wèn)題，界面一刷新，就變404了?。。?！
網(wǎng)上搜了下，需要對(duì)后端環(huán)境進(jìn)行一個(gè)配置。
這里只列舉nginx的配置，其他的配置點(diǎn)擊這里去官網(wǎng)看
先配置config/index.js
修改assetsPublicPath為根目錄
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', // hash 模式會(huì)默認(rèn)的在此處 添加為 assetsPublicPath: './'
productionSourceMap: true,
...
}
}
然后配置nignx
server {
listen 0.0.0.0:12345;
location / {
root /home/我的應(yīng)用跟目錄;
try_files $uri $uri/ /index.html =404; // 這個(gè)是重點(diǎn)
}
error_page 404 /index.html
}
Url再也沒(méi)有＃了，多完美
總結(jié)
以上所述是小編給大家介紹的Vue 去除路徑中的＃號(hào)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue實(shí)現(xiàn)頁(yè)面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實(shí)現(xiàn)頁(yè)面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
本文主要介紹了解決vue.js not detected的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue3 中的 hooks 就是函數(shù)的一種寫(xiě)法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái)，放到單獨(dú)的js文件中，或者說(shuō)是一些可以復(fù)用的公共方法/功能，這篇文章主要介紹了vue3中hooks的簡(jiǎn)介及用法,需要的朋友可以參考下2023-01-01
解決VUEX的mapState/...mapState等取值問(wèn)題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue動(dòng)態(tài)綁定v-model屬性名方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定v-model屬性名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03