东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
18
2023/08

Vue2路由元信息mate

發(fā)布時間:2023-08-18 16:10:46
發(fā)布者:芭芭雅嘎
瀏覽量:
0

  先給大家看個以前寫的很蠢的代碼。

 圖片4.png

  首先,很麻煩的把所有的路由的path寫了一遍,然后還得對照路徑寫要顯示的文字,然后在循環(huán)出來根據(jù)是否和當(dāng)前路由相等來展示。先不說每次添加新頁面都得來這個組件加一條對應(yīng)的對象,而且瀏覽器里因為是v-show,并不是沒有加載而是displaynone隱藏起來了。

  所以打開toptext這個div的時候,他不是一個,而是很多很多個。當(dāng)時忘了meta這個東西,看router的時候沒有很重視它,然后做新項目的時候想起來了meta這個東西,寫這篇文章來提醒下自己。

  簡單來說,meta就是路由身上攜帶的信息,你可以通過this.$route.meta來調(diào)用他,一般來說作用有三個,1.就是攜帶頁面中用到的信息,信息與當(dāng)前路由綁定。2.可以通過路由信息來控制不同路由展示不同頁面3.還可以做登錄校驗。我們該篇文章主要用來使用第一條。

 圖片5.png

  他的使用也非常簡單,只需要和pathname平級就可以,meta是一個對象,當(dāng)你需要調(diào)用text的時候使用this.$route.meta.text就能再頁面中得到數(shù)據(jù)。

  所以對我們之前的代碼做一個優(yōu)化。

 圖片6.png

  直接取meta里的值,也不需要判斷,這樣瀏覽器只會出現(xiàn)一條數(shù)據(jù),而且對于后續(xù)的維護(hù)更加的方便。


關(guān)鍵詞:
返回列表