鍍金池/ 問答/HTML5  HTML/ vue-router 將mode:'hash'換成mode:'history'跳

vue-router 將mode:'hash'換成mode:'history'跳轉(zhuǎn)不正常是什么原理

clipboard.png

如上面的路由配置，沒有服務(wù)端，啟動在本地。 在mode:'hash'的情況下路由訪問會進入對應(yīng)的component。 但是在mode:'history'的情況下，不管訪問哪個路由都只會跳到第一個 HelloWorld組件，而不會進入對應(yīng)的組件。 這是什么原因呢？

回答
編輯回答
神曲

1、使用hash模式的時候，原理是在你的地址后加上#號，然后在#號后加上地址來跳轉(zhuǎn)。實際上是vue-router這個插件在檢測你的hash值是多少，然后根據(jù)你的hash值去渲染指定的component。
2、在你更換為history的時候。實際上，地址欄上應(yīng)該出現(xiàn)真實的地址。即你要訪問別的地址的時候，需要去除#號。默認(rèn)在#號后的東西，是不作為新請求的（即在服務(wù)端認(rèn)為，hash后的值，還是這一頁）。這個，和你在學(xué)html的時候，點擊錨點鏈接，還是在這個頁面不刷新是一個道理，但當(dāng)你點擊了不帶#的a標(biāo)簽，鏈接是會真實跳轉(zhuǎn)一個道理。
3、回歸正題，你要實現(xiàn)跳轉(zhuǎn)，請在history模式下，確保url不帶任何一個#號。即假設(shè)樓主的cli開啟的端口是8080。
那么跳轉(zhuǎn)到login應(yīng)該是http://localhost:8080/login

2018年9月22日 00:35