首頁(yè)技術(shù)文章正文

什么是前端路由？前端路由的概念和原理

更新時(shí)間:2022年01月04日14時(shí)36分來(lái)源:傳智教育瀏覽次數(shù):

什么是路由

路由(英文：router)就是對(duì)應(yīng)關(guān)系，路由分為前端路由和后端路由，通俗的講前端路由就是，Hash 地址與組件之間的對(duì)應(yīng)關(guān)系。

SPA 與前端路由

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

此時(shí)，不同組件之間的切換需要通過(guò)前端路由來(lái)實(shí)現(xiàn)。

結(jié)論：在 SPA 項(xiàng)目中，不同功能之間的切換，要依賴于前端路由來(lái)完成!

前端路由的工作方式

①用戶點(diǎn)擊了頁(yè)面上的路由鏈接

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

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

④前端路由把當(dāng)前 Hash 地址對(duì)應(yīng)的組件渲染都瀏覽器中

實(shí)現(xiàn)簡(jiǎn)易的前端路由

步驟1：導(dǎo)入并注冊(cè)MyHome、MyMovie、MyAbout 三個(gè)組件。示例代碼如下：

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：通過(guò)標(biāo)簽的is 屬性，動(dòng)態(tài)切換要顯示的組件。示例代碼如下：

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


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

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

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

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

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