一圾结、前端路由
??????路由是根據(jù)不同的url地址顯示不同的內(nèi)容或頁面
??????前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁面的任務(wù)交給前端來做瑰剃，之前是通過服務(wù)器根據(jù)url的不同返回不同的頁面實(shí)現(xiàn)的；
??????在單頁面應(yīng)用中筝野，只有一個(gè)頁面晌姚，其它頁面都是模擬出來的，并非實(shí)實(shí)在在存在的歇竟，所有的路由都需要前端自己來構(gòu)建挥唠，所以引入前端路由；
二焕议、什么時(shí)候使用前端路由
??????在單頁面應(yīng)用中宝磨，大部分頁面結(jié)構(gòu)不變，只改變部分內(nèi)容的使用盅安；
三唤锉、前端路由有什么優(yōu)點(diǎn)和缺點(diǎn)？
??????優(yōu)點(diǎn)：用戶體驗(yàn)好别瞭，不需要每次都從服務(wù)器全部獲取窿祥，快速展現(xiàn)給用戶；
??????缺點(diǎn)：不利于SEO蝙寨；
?????????????????使用瀏覽器的前進(jìn)晒衩，后退鍵的時(shí)候嗤瞎，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求，沒有合理地利用緩存浸遗；
?????????????????單頁面無法記住之前滾動(dòng)的位置猫胁，無法在前進(jìn)，后退的時(shí)候記住滾動(dòng)的位置跛锌；
四弃秆、vue-router用來構(gòu)建SPA
<router-link></router-link> // 或者this.$router.push({path:}
<router-view></router-view> // 路由被放置的地方
五、動(dòng)態(tài)路由匹配
/user/:username/post/:post_id // 模式
/user/evan/post/123 // 匹配路徑
{username:'evan',post_id:123} // $route.params
// 動(dòng)態(tài)路由的具體寫法髓帽，路由文件中
{
path: '/device/control_auth/:cert',
component: controlAuth,
meta: {
title: '中控鑒權(quán)'
}
},
// js中data部分的寫法
cert: this.$route.params.cert,
// 路徑的寫法
./ // 當(dāng)前目錄
../ // 上級(jí)目錄
// 另外一種路由寫法
{ // 路由中的寫法
path: '/coupon/promotion',
component: receiveCoupon,
meta: {
title: '領(lǐng)取優(yōu)惠券'
}
}
// js中data部分的寫法
publicityCode: this.$route.query.publicityCode
原理：對(duì)BOM對(duì)象的history進(jìn)行了封裝
history.go(1) // 前往下一個(gè)頁面
history.go(-1) // 前往上一個(gè)頁面
history.pushState("desc",“test”,"/admin") // 第一個(gè)參數(shù)為頁面的描述菠赚，第二個(gè)為頁面的標(biāo)題，第三個(gè)為頁面的地址
路由模式：mode
mode:'history' // 使用url的方式加載地址信息
mode:'hash' // 默認(rèn)使用哈希方法郑藏，地址欄有#號(hào)
六衡查、嵌套路由
// 路由文件中
routes: [{
path: '/goods', // 父路由
name: 'GoodsList',
component: GoodsList,
children: [{ // 子路由
path: '/title',
name: 'title',
component: Title
},
{
path: '/img',
name: 'img',
component: Image
}]
}]
// 同時(shí)需要在父文件相關(guān)位置定義router-link和router-view
<div>
這是一個(gè)頁面
<router-link to="/title">顯示商品標(biāo)題</router-link>
<router-link to="/img">顯示商品圖片</router-link>
<div>
<router-view></router-view>
</div>
</div>
七、編程式路由
通過js來實(shí)現(xiàn)頁面的跳轉(zhuǎn)：
1）$router.push("name")
2）$router.push({path:"name"})
3）$router.push({path:"name?a=123})
或者$router.push({path:"name",query:{a:123}})
4）$router.go(1)
// 四種編程式路由
<button @click="jump">button - 跳轉(zhuǎn)到購物車頁面</button>
jump() {
this.$router.push('/cart')
this.$router.push({path: '/cart'})
this.$router.push({path: '/cart?goodsId=123'})
this.$router.go(-2)
}
// 獲取goodsId
<div class="">
我是購物車組件
<span>{{ $route.query.goodsId }}</span>
</div>
八必盖、命名路由和命名視圖
1）命名路由：給路由定義不同的名字拌牲，根據(jù)名字進(jìn)行匹配
// 路由寫法
{
path: '/cart/:cartId',
name: 'cart', // 此處必須有
component: Cart
}
// html寫法
<div>
<router-link :to="{name:'cart',params:{cartId:123}}">跳轉(zhuǎn)到購物車頁面</router-link>
</div>
2）命名視圖：給不同的router-view定義名字，通過名字進(jìn)行對(duì)應(yīng)組件的渲染
// App文件中
<div id="app">
<router-view class="main"></router-view>
<router-view class="left" name="title"></router-view>
<router-view class="right" name="img"></router-view>
</div>
// css文件
.left,.right
float left
width 49%
border 1px solid gray
// router文件
routes: [{
path: '/',
name: 'GoodsList',
components: {
default: GoodsList,
title: Title,
img: Image
}
},
{
path: '/cart/:cartId',
name: 'cart',
component: Cart
}]
顯示結(jié)果：
九歌粥、動(dòng)態(tài)向url傳遞參數(shù)
// 動(dòng)態(tài)向url傳遞
getCoachList() {
return new Promise((resolve, reject) => {
let occupationType = ''
if(this.occupationType != 'all'){
occupationType += `?occupationType=${this.occupationType}`
}
this.$axios.get(`${api_host}/lego/manage/coach/arrangement/overview${occupationType}`).then(res => {
let data = res.data.data
this.arrangementStatuses = data.arrangementStatuses
this.manageDayArrangements = data.manageDayArrangements
this.weekStartDate = moment(data.weekStartDate)
this.arrangementStatuses.forEach(() => {
this.isHighlighted.push(false)
})
// console.log(this.isHighlighted)
resolve(resolve)
}).catch(err => {
reject(err)
})
})
}
十塌忽、dependencies和devDependencies
dependencies // 上線時(shí)要使用的依賴
devDependencies // 開發(fā)時(shí)使用的依賴
