溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

解決vue多個(gè)路由共用一個(gè)頁(yè)面的問題

發(fā)布時(shí)間：2020-10-17 17:41:20 來源：腳本之家 閱讀：350 作者：_gunner_ 欄目：web開發(fā)

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

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

這種情況的時(shí)候，我們發(fā)現(xiàn)，其實(shí)我們的頁(yè)面在第一次加載成功后就不會(huì)再加載了。所以頁(yè)面一直顯示第一次加載的數(shù)據(jù)，給人的趕腳好像路由沒有生效，而我們通過觀察瀏覽器地址欄中的變化可以確定的是這和路由沒關(guān)系，這對(duì)剛剛開始使用的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è)面感覺沒有跳轉(zhuǎn)。

一道這種業(yè)務(wù)需求其實(shí)也比較好處理，其實(shí)我們不需要頁(yè)面切換，我們只需要頁(yè)面中的數(shù)據(jù)發(fā)生改變就好了，我們可以在頁(yè)面中監(jiān)聽路由地址的變化，當(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)的，如果沒寫，可以不用寫next()來代表允許路由跳轉(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è)面。

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手