兩種模式

vue中router可以設兩種模式：hash和history。設置方式就是代碼中注釋的部分。

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({// mode: 'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}] })

默認是hash模式。

• 如果使用hash模式，url中就會存在“#“符號，這個符號后面的是路徑。

比如我們訪問http://localhost:8080/ ，會看到瀏覽器自動添加成http://localhost:8080/#/

如果我們要訪問"/test"路徑，則url為http://localhost:8080/#/test ，而http://localhost:8080/test 不可以

• 如果使用history，則url沒有“#“符號，路徑與傳統網址一樣，如http://localhost:8080/和http://localhost:8080/test

但是這只是表面現象，這兩種模式本質的區別是什么？

history模式

先理解hash模式，就先要知道history模式，因為hash模式是解決問題出現，知道問題是什么就很容易理解hash模式。

history模式就是我們傳統的路徑，url中的路徑就是服務端根目錄下的相對路徑，是真實路徑。

比如http://localhost:8080/test/123.html ，則就需要在根目錄下有test文件夾，文件夾下有123.html這個文件。

但是如果我們沒有這個文件，而是用vue這種router的方式呢？

那么就必須用nginx代理，否則找不到這個文件就是返回404。

這樣就需要在nginx中配置每一個route，漏下一個就會404

所以history模式下的路由分發是服務端（nginx）來做的

hash模式

為了解決上面的問題，hash模式出現了。在hash模式的url中“#“符號后面的路徑并不是真實路徑，而是以類似參數的形式傳給默認文件。

默認文件就是index，在這里通過“#“符號后面的路徑去匹配路由處理，所以只要有index這一個文件是真實路徑就可以。

這樣就不需要在nginx一個個配置了。

這樣hash模式下的路由分發就不需要服務端來做了，直接在前端就處理了。

總結

以上是生活随笔為你收集整理的Vue 路由router的两种模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。