Vue路由模式

vue-router中默認的路由模式是hash模式，即：#/路由地址

當啟用history路由模式，就不會看到#，只剩：/路由地址 

由此可能出現問題：客戶端和服務端都有路由地址，並且有可能重名。如服務端：/index（服務器端查詢）  VUE中：/index（Vue腳手架路由器查詢）且，瀏覽器只要看到不帶#的地址，都會發送給服務器端

解決方法：在服務器端配置重定向，發現來源的域名地址不是服務器端域名地址，只是相對路徑相同，則重新返回給瀏覽器，請瀏覽器解析。

步驟：

　　①Vue腳手架中：router/index.js中：

　　　　new VueRouter({
　　　　　　mode:"history",
　　　　　　routes
　　　　})

 

　　② 如果服務器端是nodejs：需要安裝一個專門支持history重定向的中間件

　　　　npm i -save connect-history-api-fallback

　　　　在app.js中，先引入history（require("connect-history-api-fallback")），再創建服務器（var app=express()），app.use(history())

雖然改成了history模式，但是帶#/和不帶#方式其實都能用

 

可是設置了history模式后會出現一個新的問題：重定向后，刷新頁面，有可能會導致樣式和圖片路徑都找不到

此時可以：

　　（1）所有圖片和可直接使用的第三方的js和css文件，放public；

　　（2）在index.html中，引入public下的第三方js和css和img文件時，以/開頭，不能用相對路徑

   　（3）服務端請求來的src屬性的地址，如果不帶/開頭，需要先通過遍歷或者字符串拼接的方式，把src屬性前面拼上"/xxx"讓路勁完整