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