vue-router兩種模式的區別

參考文獻:https://blog.csdn.net/lla520/article/details/77894985/css

http://www.javashuo.com/article/p-xjxelpqv-dd.htmlhtml

https://blog.csdn.net/bujiongdan/article/details/81429927前端

先後端分離 ===> 利用Ajax,能夠在不刷新瀏覽器的狀況下異步數據請求交互。segmentfault

單頁應用(只有一個html文件,整個網站的全部內容都在這一個html裏,經過js來處理不單單是在頁面交互是無刷新的,連頁面跳轉都是無刷新的。爲了實現單頁應用 ==> 先後端分離 + 前端路由。(更新視圖但不從新請求頁面)後端

前端路由實現起來其實也很簡單,就是匹配不一樣的 url 路徑,進行解析,加載不一樣的組件,而後動態的渲染出區域 html 內容瀏覽器

hash模式

#後面 hash 值的變化,並不會致使瀏覽器向服務器發出請求,瀏覽器不發出請求,也就不會刷新頁面。每次 hash 值的變化,會觸發hashchange 這個事件,經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange來實現更新頁面部份內容的操做服務器

hash模式背後的原理是onhashchange事件,能夠在window對象上監聽這個事件:前後端分離

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

 上面的代碼能夠經過改變hash來改變頁面字體顏色。異步

當你選擇mode類型以後,程序會根據你選擇的mode 類型建立不一樣的history對象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)字體

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

HashHistory有兩個方法:HashHistory.push()將新路由添加到瀏覽器訪問歷史的棧頂 和 HashHistory.replace()替換掉當前棧頂的路由

 

由於hash發生變化的url都會被瀏覽器記錄(歷史訪問棧)下來,從而你會發現瀏覽器的前進後退均可以用了。這樣一來,儘管瀏覽器沒有請求服務器,可是頁面狀態和url一一關聯起來。

 

history模式

由於HTML5標準發佈,多了兩個 API,pushState()replaceState()。經過這兩個 API (1)能夠改變 url 地址且不會發送請求,(2)不只能夠讀取歷史記錄棧,還能夠對瀏覽器歷史記錄棧進行修改。

除此以外,還有popState().當瀏覽器跳轉到新的狀態時,將觸發popState事件.

修改歷史狀態

包括了pushState,replaceState兩個方法,這兩個方法接收三個參數:stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

切換歷史狀態

包括back,forward,go三個方法,對應瀏覽器的前進forward,後退back,跳轉go操做。   有同窗說了,(谷歌)瀏覽器只有前進和後退,沒有跳轉,嗯,在前進後退上長按鼠標,會出來全部當前窗口的歷史記錄,從而能夠跳轉(也許叫跳更合適):

  1. history.go(-2);//後退兩次
  2. history.go(2);//前進兩次
  3. history.back(); //後退
  4. hsitory.forward(); //前進

區別:

  • 前面的hashchange,你只能改變#後面的url片斷。而pushState設置的新URL能夠是與當前URL同源的任意URL。
  • history模式則會將URL修改得就和正常請求後端的URL同樣,如後端沒有配置對應/user/id的路由處理,則會返回404錯誤

當用戶刷新頁面之類的操做時,瀏覽器會給服務器發送請求,因此這個實現須要服務器的支持,須要把全部路由都重定向到根頁面。

 

history模式怕啥
不怕前進,不怕後退,就怕刷新,(若是後端沒有準備的話),由於刷新是實實在在地去請求服務器的。

在history模式下,你能夠自由的修改path。history模式最終的路由都體如今url的pathname中,這部分是會傳到服務器端的,所以須要服務端對每個可能的path值都做相應的映射。

當刷新時,若是服務器中沒有相應的響應或者資源,會分分鐘刷出一個404來。

 

router掛在到根組件

new Vue({
  router
})

此時的router會被掛載到 Vue 的根組件this.$options選項中。在 option 上面存在 router 則表明是根組件。

 

$router與$route的區別

 1. $route從當前router跳轉對象裏面能夠獲取name、path、query、params等(<router-link>傳的參數由 this.$route.query或者 this.$route.params 接收)

 

2. $router爲VueRouter實例。想要導航到不一樣URL,則使用$router.push方法;返回上一個history也是使用$router.go方法

相關文章
相關標籤/搜索