首頁技術文章正文

什么是前端路由?前端路由的工作方式

更新時間:2022-01-10 來源:黑馬程序員 瀏覽量:

什么是路由

路由(英文:router)就是對應關系, 路由分為前端路由和后端路由, 通俗的講前端路由就是,Hash 地址與組件之間的對應關系。

SPA 與前端路由

SPA 指的是一個 web 網(wǎng)站只有唯一的一個 HTML 頁面,所有組件的展示與切換都在這唯一的一個頁面內(nèi)完成。

此時,不同組件之間的切換需要通過前端路由來實現(xiàn)。

結(jié)論:在 SPA 項目中,不同功能之間的切換,要依賴于前端路由來完成!

前端路由的工作方式

①用戶點擊了頁面上的路由鏈接

②導致了 URL 地址欄中的 Hash 值發(fā)生了變化

③前端路由監(jiān)聽了到 Hash 地址的變化

④前端路由把當前 Hash 地址對應的組件渲染都瀏覽器中

實現(xiàn)簡易的前端路由

步驟1:導入并注冊MyHome、MyMovie、MyAbout 三個組件。示例代碼如下:

import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyAbout from './components/MyAbout.vue'
export default {
    components: {
        MyHome,
        MyMovie,
        MyAbout,
    },
}

步驟2:通過標簽的is 屬性,動態(tài)切換要顯示的組件。示例代碼如下:

< template > 
 < h1 > App 組件 < /h1> 


 < component: is = "comName" > < /component> 
< /template>
export default t
data() {
    return {
        comName: 'my-home', //要展示的組件的名稱
    }
  },
}

步驟3:在組件的結(jié)構(gòu)中聲明如下3 個鏈接,通過點擊不同的鏈接,切換瀏覽器地址欄中的Hash 值

<a href="#/home">Home</a>&nbsp;
<a href="#/movie">Movie</a>&nbsp;
<a href="#/about">About</a>

步驟4:在created生命周期函數(shù)中監(jiān)聽瀏覽器地址欄中Hash 地址的變化,動態(tài)切換要展示的組件的名稱:

created() {
    windoiufonhashchange = () => {
        switch (location.hash) {
            case '#/home': //點擊了“首頁“的鏈接
            this.comName = 'my-home'
            break
            case '#/movie': //點擊了“電影”的鏈接
            this.comName = 'my-movie'
            break
            case '#/about': //點擊了“關于”的鏈接
            this.comName = 'my-about'
            break
        }
    }
}






猜你喜歡:

整合項目和路由功能的開發(fā)

頁面路由是什么意思?【圖文介紹前后端路由】

實現(xiàn)單頁面前端路由的兩種方式

Django框架中路由詳細介紹

黑馬程序員HTML前端與移動開發(fā)培訓

分享到:
在線咨詢 我要報名
和我們在線交談!