什么是前端路由？怎樣實(shí)現(xiàn)一個(gè)簡(jiǎ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)聽(tīng)了到 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)聽(tīng)瀏覽器地址欄中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
        }
    }
}