首頁  >  文章  >  web前端  >  vue的單頁應用前端路由使用詳解

vue的單頁應用前端路由使用詳解

php中世界最好的语言
php中世界最好的语言原創
2018-04-08 11:23:101476瀏覽

這次帶給大家vue的單頁應用前端路由使用詳解,vue單頁應用前端路由使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

寫在前面:通常SPA 中前端路由有2種實作方式:

  1. #window.history

  2. location. hash

以下就來介紹下這兩種方式具體怎麼實現的

一.history

1.history基本介紹

window.history 物件包含瀏覽器的歷史,window.history 物件在撰寫時可不使用window 這個前綴。 history是實作SPA前端路由是一種主流方法,它有幾個原始方法:

  1. history.back() - 與在瀏覽器點擊後退按鈕相同

  2. history.forward() - 與在瀏覽器中點擊按鈕向前相同

  3. #history.go(n) - 接受一個整數作為參數,移動到該整數指定的頁面,例如go(1)相當於forward(),go(-1)相當於back(),go(0)相當於刷新目前頁面

  4. ##如果移動的位置超出了存取歷史的邊界,以上三個方法並不報錯,而是靜默失敗

#在HTML5,

history物件提出了pushState()方法和replaceState() 方法,這兩個方法可以用來向歷史棧中添加數據,就好像url 變化了一樣(過去只有url 變化歷史棧才會變化),這樣就可以很好的模擬瀏覽歷史和前進後退了,現在的前端路由也是基於這個原理來實現的。

2.history.pushState

pushState(stateObj, title, url) 方法向歷史堆疊中寫入數據,其第一個參數是要寫入的資料物件(不大於640kB),第二個參數是頁面的title, 第三個參數是url (相對路徑)。

  1. stateObj :與指定網址相關的狀態對象,popstate事件觸發時,該對象會傳入

    回呼函數。如果不需要這個對象,此處可以填null。

  2. title:新頁面的標題,但是所有瀏覽器目前都忽略這個值,因此這裡可以填入null。

  3. url:新的網址,必須與目前頁面處在同一個網域。瀏覽器的網址列將顯示這個網址。

關於pushState,有幾個值得注意的地方:

pushState方法不會觸發頁面刷新,只是導致history物件發生變化,地址列會有反應,只有當觸發前進後退等事件(back()和forward()等)時瀏覽器才會刷新

這裡的url 是受到同源策略限制的,防止惡意腳本模仿其他網站url 用來欺騙用戶,所以當違反同源策略時將會報錯

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的差異就在於它不是寫入而是替換修改瀏覽歷史中當前紀錄,其餘和pushState一模一樣

4.popstate事件

定義:每當同一個文檔的瀏覽歷史(即history物件)出現變化時,就會觸發popstate事件。

注意:僅僅呼叫pushState方法或replaceState方法,並不會觸發該事件,只有使用者點擊瀏覽器倒退按鈕和前進按鈕,或

使用JavaScript呼叫back、forward、go方法時才會觸發。另外,該事件只針對同一個文檔,如果瀏覽歷史的切換,導致加載不同的文檔,該事件也不會觸發。

用法:使用的時候,可以為popstate事件指定回呼函數。這個回呼

函數的參數就是一個event事件對象,它的state屬性指向pushState和replaceState方法為目前URL所提供的狀態物件(即這兩個方法的第一個參數)。

5.history實作spa前端路由代碼

<a class="api a">a.html</a>
<a class="api b">b.html</a>
 // 注册路由
  document.querySelectorAll('.api').forEach(item => {
   item.addEventListener('click', e => {
    e.preventDefault();
    let link = item.textContent;
    if (!!(window.history && history.pushState)) {
     // 支持History API
     window.history.pushState({name: 'api'}, link, link);
    } else {
     // 不支持,可使用一些Polyfill库来实现
    }
   }, false)
  });
  // 监听路由
  window.addEventListener('popstate', e => {
   console.log({
    location: location.href,
    state: e.state
   })
  }, false)
popstate監聽函數裡印出的e.state便是history.pushState()裡傳入的第一個參數,在這裡即為{name: 'api'}

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange,以下几种情况都会触发这个事件:

  1. 直接更改浏览器地址,在最后面增加或改变#hash;

  2. 通过改变location.href或location.hash的值;

  3. 通过触发点击带锚点的链接;

  4. 浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同。

2.Hash实现spa前端路由代码

  // 注册路由
  document.querySelectorAll('.api').forEach(item => {
   item.addEventListener('click', e => {
    e.preventDefault();
    let link = item.textContent;
    location.hash = link;
   }, false)
  });
  // 监听路由
  window.addEventListener('hashchange', e => {
   console.log({
    location: location.href,
    hash: location.hash
   })
  }, false)

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue.js实现操作class的方法

D3.js实现动态仪表盘案列

以上是vue的單頁應用前端路由使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn