在日常的vue開(kāi)發(fā)中我們可能會(huì)遇見(jiàn)多個(gè)路由需要共用一個(gè)頁(yè)面的需求，特別是當(dāng)路由是通過(guò)動(dòng)態(tài)添加的，不同的路由展示的東西只是數(shù)據(jù)不同其他沒(méi)有變化。例如：

let routes = [  {path:"/zhanshan",  components:Person,  },  {path:"/lisi",  components:Person,  },  {path:"/wangwu",  components:Person,  }]

這種情況的時(shí)候，我們發(fā)現(xiàn)，其實(shí)我們的頁(yè)面在第一次加載成功后就不會(huì)再加載了。所以頁(yè)面一直顯示第一次加載的數(shù)據(jù)，給人的趕腳好像路由沒(méi)有生效，而我們通過(guò)觀察瀏覽器地址欄中的變化可以確定的是這和路由沒(méi)關(guān)系，這對(duì)剛剛開(kāi)始使用的vue的同學(xué)可能會(huì)產(chǎn)生一點(diǎn)點(diǎn)困擾，其實(shí)這和頁(yè)面的聲明周期是相關(guān)的，這種情況出現(xiàn)的原因是因?yàn)轫?yè)面在加載后他的大多數(shù)鉤子函數(shù)（mounted，computed…）就不會(huì)再次出發(fā)了，所以導(dǎo)致頁(yè)面感覺(jué)沒(méi)有跳轉(zhuǎn)。

一道這種業(yè)務(wù)需求其實(shí)也比較好處理，其實(shí)我們不需要頁(yè)面切換，我們只需要頁(yè)面中的數(shù)據(jù)發(fā)生改變就好了，我們可以在頁(yè)面中監(jiān)聽(tīng)路由地址的變化，當(dāng)?shù)刂纷兓臅r(shí)候，我們就重新加載數(shù)據(jù)。

watch:{ "$route":function(to,from){   //from 對(duì)象中包含當(dāng)前地址   //to 對(duì)象中包含目標(biāo)地址   //其實(shí)還有一個(gè)next參數(shù)的，這個(gè)參數(shù)是控制路由是否跳轉(zhuǎn)的，如果沒(méi)寫，可以不用寫next()來(lái)代表允許路由跳轉(zhuǎn)，如果寫了就必須寫next(),否則路由是不會(huì)生效的。 }}

每當(dāng)路由發(fā)生變化的時(shí)候上面的函數(shù)都會(huì)被觸發(fā)，我們可以在這個(gè)函數(shù)中對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行重新加載的操作。如果頁(yè)面結(jié)構(gòu)變化很大，還是建議單獨(dú)新建一個(gè)不同的頁(yè)面。

上面的問(wèn)題可能對(duì)新入門vue的朋友有用，對(duì)vue比較了解了的朋友請(qǐng)繞過(guò)。

這篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。