Vue router-view和router-link的實(shí)現(xiàn)原理
更新時(shí)間：2021年03月09日 09:24:24 作者：mengyuhang4879
這篇文章主要介紹了Vue router-view和router-link的實(shí)現(xiàn)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
使用
<div id="app"> <router-link to='home'>首頁(yè)</router-link> <router-link to='about'>關(guān)于</router-link> <router-view a=1><router-view/> </div>
router-view組件
export default {
//函數(shù)式組件沒(méi)有this 不能new 沒(méi)有雙向數(shù)據(jù)綁定，通常用的比較少，比較適用于展示詳情頁(yè)因?yàn)樵斍轫?yè)只展示不進(jìn)行修改等操作，函數(shù)式組件比有狀態(tài)的組件更加輕量級(jí)。
functional:true,
render(h,{parent,data}){
parent表示的父組件 app
data 是行間屬性(上面代碼a=1) 也可以使用prop傳遞
let route = parent.$route;
let depth = 0;
data.routerView = true;
while(parent){
//$vnode指的是虛擬dom 如果app上有虛擬dom并且這個(gè)虛擬dom上的routerView為true
if (parent.$vnode && parent.$vnode.data.routerView){
depth++;
}
parent = parent.$parent;
}
let record = route.matched[depth];
if(!record){
return h();
}
return h(record.component, data);
}
}
router-link的實(shí)現(xiàn)
export default {
props:{
to:{
type:String,
required:true
},
tag:{
type:String
}
},
render(h){
let tag = this.tag || 'a';
let handler = ()=>{
this.$router.push(this.to);
}
return <tag onClick={handler}>{this.$slots.default}</tag>
}
}
到此這篇關(guān)于Vue router-view和router-link的實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)Vue router-view和router-link內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)
這篇文章主要介紹了Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue3封裝計(jì)時(shí)器組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了Vue透?jìng)鰽ttributes使用解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在現(xiàn)代應(yīng)用程序中，日志是一項(xiàng)重要的功能，用于幫助開(kāi)發(fā)人員和運(yùn)維人員了解應(yīng)用程序的行為并進(jìn)行故障排除，本文將介紹如何在Vue應(yīng)用程序中實(shí)現(xiàn)分布式日志管理和日志分析功能，感興趣的可以了解一下2023-06-06
在vue中動(dòng)態(tài)添加class類(lèi)進(jìn)行顯示隱藏實(shí)例
今天小編就為大家分享一篇在vue中動(dòng)態(tài)添加class類(lèi)進(jìn)行顯示隱藏實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue中關(guān)于this指向的問(wèn)題示例詳解
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時(shí)會(huì)指向window，導(dǎo)致調(diào)用失敗報(bào)錯(cuò)，這篇文章主要介紹了Vue中關(guān)于this指向的問(wèn)題 ,需要的朋友可以參考下2022-07-07
vue項(xiàng)目打包優(yōu)化的方法實(shí)戰(zhàn)記錄
最近入職了新公司,接手了一個(gè)新拆分出來(lái)的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,把經(jīng)驗(yàn)分享出來(lái),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包優(yōu)化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結(jié)合實(shí)例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09