<track id="ttlv7"></track>

<pre id="ttlv7"></pre>

      <dl id="ttlv7"></dl>

        <track id="ttlv7"></track>
        <del id="ttlv7"></del>
          <mark id="ttlv7"><ruby id="ttlv7"></ruby></mark>

              <b id="ttlv7"><span id="ttlv7"></span></b>

                <big id="ttlv7"><th id="ttlv7"><dfn id="ttlv7"></dfn></th></big>

                教育行業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+前端培訓課程

                久久婷婷五月综合色啪,好好热精品视频6,天天玩,天天鲁,天天曰,,超频99免费观看视频,一道精品视频一区二区三区,成av人电影在线观看,欧美成 人 在线播放