本篇是是vue路由的開(kāi)篇,會(huì)以一個(gè)簡(jiǎn)單的demo對(duì)vue-router進(jìn)行一個(gè)介紹,主要覆蓋以下幾個(gè)常用場(chǎng)景:
1、路由跳轉(zhuǎn)
2、嵌套路由
3、路由參數(shù)
1、Vue-Router
一般來(lái)說(shuō),路由定義就是定義地址訪問(wèn)規(guī)則,然后由路由引擎根據(jù)這些定義的規(guī)則去查找對(duì)應(yīng)的頁(yè)面,并轉(zhuǎn)發(fā)請(qǐng)求給頁(yè)面進(jìn)行處理;對(duì)于后端來(lái)說(shuō)就是這么一個(gè)模式,但前端不同,前端路由變化也只是頁(yè)面內(nèi)的導(dǎo)航比如angular中的模版切換,比如vue和react中的component切換,這種方式都是基于瀏覽器hash模擬url跳轉(zhuǎn)。
vue-router是官方提供的一套路由工具庫(kù),基于component的路由配置引入都非常簡(jiǎn)單,最常用的是兩個(gè)指令:router-view 和 router-link,router-view用來(lái)提供占位,router-link提供路由鏈接,對(duì)于這兩個(gè)指令的介紹,我們可以直接通過(guò)demo介紹。接下來(lái)我們以傳統(tǒng)方式引入vue-router: