• <optgroup id="ccyim"><button id="ccyim"></button></optgroup>
  • 教育行業A股IPO第一股(股票代碼 003032)

    全國咨詢/投訴熱線:400-618-4000

    vue-router如何實現實現單頁面前端路由?

    更新時間:2021年03月05日17時32分 來源:傳智教育 瀏覽次數:

    好口碑IT培訓

    vue-router是Vue官方推出的路由管理器,主要用于管理URL,實現URL和組件的對應,以及通過URL進行組件之間的切換,從而使構建單頁面應用變得更加簡單。

    vue-router的工作原理

    單頁面應用(SPA)的核心思想之一,就是更新視圖而不重新請求頁面,簡單來說,它在加載頁面時,不會加載整個頁面,只會更新某個指定的容器中的內容。對于大多數單頁面應用,都推薦使用官方支持的vue-router。在實現單頁面前端路由時,提供了兩種方式,分別是hash模式和history模式,根據mode參數來決定采用哪一種方式。

    1. hash模式

    vue-router默認為hash模式,使用URL的hash來模擬一個完整的URL,當URL改變時,頁面不會重新加載。#就是hash符號,中文名為哈希符或者錨點,在hash符號后的值稱為hash值。

    路由的hash模式是利用了window可以監聽onhashchange事件來實現的,也就是說hash值是用來指導瀏覽器動作的,對服務器沒有影響,HTTP 請求中也不會包括hash值,同時每一次改變hash值,都會在瀏覽器的訪問歷史中增加一個記錄,使用“后退”按鈕,就可以回到上一個位置。所以,hash 模式是根據hash值來發生改變,根據不同的值,渲染指定DOM位置的不同數據。

    2. history模式

    hash模式的URL中會自帶#號,影響URL的美觀,而history模式不會出現#號,這種模式充分利用了history.pushState()來完成URL的跳轉,而且無須重新加載頁面。使用history模式時,需要在路由規則配置中增加mode:'history',示例代碼如下:

    // main.js文件
    const router = new VueRouter({
     mode:'history',
     routes:[...]
    })



    猜你喜歡:

    VUE框架有哪些優點?

    VUE是什么意思?

    Vue中如何監控某個屬性值的變化?

    HTML&JS+前端培訓課程

    男女乱婬真视频,波多野结衣中文字幕在观线看,翘着光屁股趴在办公室,欧美做真爱免费A片