什么是前端路由？

 路由是根據(jù)不同的url地址展示不同的內(nèi)容或頁(yè)面
 前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或者頁(yè)面的任務(wù)交給前端來(lái)做，之前是通過(guò)服務(wù)器根據(jù)url的不同返回不同的頁(yè)面

什么時(shí)候使用

 單頁(yè)面應(yīng)用程序，大部分頁(yè)面結(jié)構(gòu)不變，變動(dòng)部分結(jié)構(gòu)

優(yōu)點(diǎn)與缺點(diǎn)

 優(yōu)點(diǎn)：用戶(hù)體驗(yàn)好，不需要每次從服務(wù)器全部獲取，快速展示給用戶(hù)
 缺點(diǎn)：不利于SEO,
           使用瀏覽器的前進(jìn)，后退會(huì)重新發(fā)送請(qǐng)求，沒(méi)有合理利用緩存
           單頁(yè)面無(wú)法記住之前的滾動(dòng)位置，無(wú)法在前進(jìn)后退是定到之前對(duì)應(yīng)的位置
           首次加載緩慢

vue-router用來(lái)構(gòu)建SPA 單頁(yè)Web應(yīng)用（single page web application，SPA）
<router-link></router-link>跳到指定的路由 （類(lèi)似于a標(biāo)簽） 或者this.$router.push({path:''}) //通過(guò)代碼方式進(jìn)行頁(yè)面調(diào)整
<router-view></router-view> 指令渲染

動(dòng)態(tài)路由匹配

image.png

image.png

image.png

嵌套路由

路由里面嵌套路由，使用情形 左側(cè)菜單 右側(cè)內(nèi)容展示
路由配置子路由

image.png

頁(yè)面使用

image.png

編程式路由

通過(guò)js來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)
$router.push("name");
$router.push({path:"name"});
$router.push({path:"name?a=123"});或者$router.push({path:"name",query:{a:123}})
$router.go(1) 類(lèi)似于history.go 功能

image.png

頁(yè)面怎么獲取到傳遞的參數(shù)

image.png

注意：
$route.params.goodsId params是動(dòng)態(tài)路由傳遞參數(shù)
$route.query .goodsId query組件切換路由與路由之間的參數(shù)傳遞

命名路由和命名視圖

給路由定義不同的名字，根據(jù)名字進(jìn)行匹配
給不同的router-view定義名字。通過(guò)名字進(jìn)行對(duì)應(yīng)組件的渲染
router/index.js

image.png

App.vue

image.png

image.png