先給大家看個(gè)以前寫的很蠢的代碼。

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

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

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

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

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

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