資訊專欄INFORMATION COLUMN
摘要：的默認(rèn)數(shù)據(jù)模式使用的來模擬一個(gè)完整的，于是當(dāng)改變時(shí)，頁面不會(huì)重新加載。一般情況下，我們不喜歡丑丑的，類似于，可以使用路由的模式。模式是利用來實(shí)現(xiàn)頁面跳轉(zhuǎn)。但是有個(gè)問題，在使用的時(shí)候，我們需要添加一些配置。
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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95796.html
摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種。無法啟動(dòng)服務(wù)，報(bào)錯(cuò)參考資料發(fā)現(xiàn)端口沖突，已經(jīng)在服務(wù)中已經(jīng)配置端口。服務(wù)端口更改為。 文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種BUG。參考了很多方法，會(huì)在文章中引用出來...
摘要：但如果要使用模式，我們需要在后端進(jìn)行額外配置。模式的配置方法我們來看看官方文檔是教我們?cè)趺磁渲玫哪Ｊ健ＤＪ降呐渲脤?shí)踐及原理強(qiáng)烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設(shè)置為，但不配置后端。 始發(fā)于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認(rèn)模式，url的表現(xiàn)形式為...
摘要：模式部署沒有什么問題，只要訪問到服務(wù)器上的，就可以訪問網(wǎng)站了。問題起因在做年度賬單項(xiàng)目的時(shí)候，項(xiàng)目部署的時(shí)候，用的是模式。這樣幾項(xiàng)配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。 寫在前面 Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello，...
摘要：修改三個(gè)配置，具體操作日后有時(shí)間更新，不懂私聊項(xiàng)目目錄配置實(shí)例項(xiàng)目路徑配置指向項(xiàng)目放在，但是指向，訪問就好了 修改三個(gè)配置，具體操作日后有時(shí)間更新，不懂私聊1 const route = new Router({ mode: history, base: /doctor-html/, routes }) 2 assetsPublicPath: /doctor-html/, ...
閱讀 1661·2021-11-22 14:45
閱讀 1112·2021-11-17 09:33
閱讀 3361·2021-09-02 09:48
閱讀 997·2019-08-30 15:54
閱讀 2793·2019-08-30 15:53
閱讀 2582·2019-08-30 12:54
閱讀 2272·2019-08-29 12:37
閱讀 2449·2019-08-26 13:58
