小編給大家分享一下Vue中hash路由和history路由的區別有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
hash路由和history路由這兩種模式的區別，從以下幾個方面梳理一下吧：
hash: 即地址欄 URL 中的#符號。 比如這個 URL：http://www.abc.com/#/hello， hash 的值為 #/hello。它的特點在于：hash 雖然出現在 URL 中， 但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
history: 地址欄中沒有 #。比如這個 URL：http://www.abc.com/hello，更美觀，是個正常的url，適合推廣宣傳。
history: 在開發app的時候有分享頁面，這個分享出去的頁面就是用vue或是react做的，咱們把這個頁面分享到第三方的app里，有的app里面url是不允許帶有#號的，所以要將#號去除那么就要使用history模式，但是使用history模式還有一個問題就是，在訪問二級頁面的時候，做刷新操作，會出現404錯誤，那么就需要和后端人配合，讓他配置一下apache或是nginx的url重定向，重定向到你的首頁路由上就好了。
hash: 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面;
history： 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。
這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back()、forward()、go() 方法的基礎之上，這兩個方法提供了對歷史記錄進行修改的功能。當使用這兩個方法執行修改時，只能改變當前地址欄的 URL，但瀏覽器不會向后端發送請求，也不會觸發popstate事件的執行，一般會出現404，這時候就需要和后端人配合，設置重定向。
一般情況下，hash 和 history 都可以，如果你是個顏值控，對 # 符號夾雜在 URL 里有些不爽。
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉而無須重新加載頁面。調用 history.pushState() 相比于直接修改 hash，存在以下優勢：
pushState() 設置的新 URL 可以是與當前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設置與當前 URL 同文檔的 URL；
pushState() 設置的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設置的新值必須與原來不一樣才會觸發動作將記錄添加到棧中；
ushState() 通過 stateObject 參數可以添加任意類型的數據到記錄中；而 hash 只可添加短字符串pushState() 可額外設置 title 屬性供后續使用。
看完了這篇文章，相信你對“Vue中hash路由和history路由的區別有哪些”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
