vue-router+nginx 非根路徑配置方法
vue-router 的默認(rèn)數(shù)據(jù)hash模式-使用url的hash來模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁面不會(huì)重新加載。
一般情況下，我們不喜歡丑丑的hash，類似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API來實(shí)現(xiàn)頁面跳轉(zhuǎn)。
但是有個(gè)問題，在使用nginx的時(shí)候，我們需要添加一些配置。
直接配置在根路徑下
直接配置在根路徑下，訪問的時(shí)候只用輸入http://yoursite.com，在nginx的配置如下
location / {
try_files $uri $uri/ /index.html;
}
非根路徑配置
如果一個(gè)域名下有多個(gè)項(xiàng)目，那么使用根路徑配置就不合適了，我們需要在根路徑下指定一層路徑，比如說
A項(xiàng)目
http://yoursite.com/A
B項(xiàng)目
http://yoursite.com/B
nginx的配置
location ^~/A {
alias /XX/A;//此處為A的路徑
index index.html;
try_files $uri $uri/ /A/index.html;
}
location ^~/B {
alias /XX/B;//此處為B的路徑
index index.html;
try_files $uri $uri/ /B/index.html;
}
tip: 注意要用alias不能用root
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn)功能
- Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
- Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
- vue-router如何實(shí)現(xiàn)history模式配置
- Vue-Router的routes配置詳解
- Vue Router history模式的配置方法及其原理
- vue-router的使用方法及含參數(shù)的配置方法
- 使用vue-router為每個(gè)路由配置各自的title
- vue router 配置路由的方法
- vue中的Router基本配置命令實(shí)例詳解
相關(guān)文章
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Vue+ElementUI怎么處理超大表單實(shí)例講解
在本篇文章里小編給大家整理的是一篇關(guān)于Vue+ElementUI怎么處理超大表單實(shí)例講解內(nèi)容，以后需要的朋友可以跟著學(xué)習(xí)參考下。2021-11-11
vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案
這篇文章主要介紹了vue項(xiàng)目打包部署后默認(rèn)路由不正確的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，2020-01-01
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關(guān)資料內(nèi)容，具有一定參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了Vuex之module使用方法及場(chǎng)景說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10