- <router-link>的replace屬性
- 作用:控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式:分別為push和replace,push是追加歷史記錄盏浇,replace是替換當(dāng)前記錄锋勺。路由跳轉(zhuǎn)時候默認(rèn)為push
- 如何開啟replace模式:
<router-link replace .......>News</router-link>
- 編程式路由導(dǎo)航
- 作用:不借助<router-link> 實(shí)現(xiàn)路由跳轉(zhuǎn)蚀瘸,讓路由跳轉(zhuǎn)更加靈活
- 具體實(shí)現(xiàn)
//$router的兩個API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前進(jìn)
this.$router.back() //后退
this.$router.go() //可前進(jìn)也可后退,正數(shù)前進(jìn)狡蝶,負(fù)數(shù)后退。
- 緩存路由組件
- 作用:讓不展示的路由組件保持掛載贮勃,不被銷毀贪惹。
- 具體編碼
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
其中News指的是組件名,一般會使用在用戶輸入一些東西之后衙猪,切換回來馍乙,需要保持用戶的輸入。寫include說明要緩存的組件垫释,不寫丝格,則表示組件都會被緩存。如果有兩個以上則寫成數(shù)組的形式棵譬。
- 兩個新的生命周期鉤子
- 路由組件所獨(dú)有的兩個鉤子显蝌,用于捕獲路由組件的激活狀態(tài)订咸。
- 具體的名字:
activated路由組件被激活時觸發(fā)曼尊。沒有被<keep-alive>包裹的話,activated是不起作用的脏嚷。在mounted之后執(zhí)行。所以當(dāng)我們運(yùn)用了組件緩存時神郊,如果想每次切換都發(fā)送一次請求的話涌乳,需要把請求函數(shù)寫在activated中夕晓,而寫在created或mounted中其只會在首次加載該組件的時候起作用蒸辆。
deactivated路由組件失活時觸發(fā)乔煞。