路由懶加載:const 組件名=() => import('組件路徑');
路由傳參:
注意:,當(dāng)使用路由參數(shù)時(shí)奖蔓,例如從 /find/hello導(dǎo)航到 /find/word置媳,原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件贰谣,不會(huì)觸發(fā)生命周期鉤子剃执,需要通過(guò)watch來(lái)監(jiān)聽(tīng)路由參數(shù)的變化
例如“
export default {
name:'find',
.....
watch:{
'$route'(to,from) {
console.log(to.params);
}
},
組件中的slot,通過(guò)slot可以讓組件復(fù)用性更強(qiáng)
編程式導(dǎo)航:即動(dòng)態(tài)創(chuàng)建的路由
添加路由:this.$router.push() 智玻,會(huì)向 history 添加新記錄
前進(jìn)和后退:this.$router.go(步驟)
替換:this.$router.replace() ,它不會(huì)向 history 添加新記錄
編程式導(dǎo)航如何傳參:
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
其中:name為路由表router.js每項(xiàng)路由的名子
例如:
{
name:'login',
path:'/login',
component:login
},
// 帶查詢參數(shù)摹恰,變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
svg: svg矢量圖捅位,放大不失真,可以通過(guò)css,js操縱
應(yīng)用領(lǐng)域:動(dòng)畫杆查,icon等
svg使用:
第一步:http://www.iconfont.cn/ 官網(wǎng)扮惦,搜索需要的icon并添加到購(gòu)物車
第二步:找開(kāi)購(gòu)物車,點(diǎn)擊“下載代碼”并解壓亲桦,找到demo_symbol.html文件
第三步:打開(kāi)demo_symbol.html文件崖蜜,找開(kāi)chrome開(kāi)發(fā)者工具 ->elements
第四步:找到并右擊svg標(biāo)簽->eidt as html,全選并復(fù)制
第五步:找開(kāi)vue腳本架中的index.html客峭,并將剛才復(fù)制的svg代碼粘貼進(jìn)云
第六步:將svg嵌入到對(duì)應(yīng)的圖標(biāo)位置,格式:
<svg class="icon" aria-hidden="true">
<use :xlink:href="svg的id名`"></use>
</svg>