解決vue多個路由共用一個頁面的問題

下面我就為大家分享一篇解決vue多個路由共用一個頁面的問題，具有很好的參考價值，希望對大家有幫助。

在日常的vue開發中我們可能會遇見多個路由需要共用一個頁面的需求，特別是當路由是透過動態添加的，不同的路由展示的東西只是資料不同其他沒有變化。例如：

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

這種情況的時候，我們發現，其實我們的頁面在第一次載入成功後就不會再載入了。所以頁面一直顯示第一次加載的數據，給人的趕腳好像路由沒有生效，而我們通過觀察瀏覽器地址欄中的變化可以確定的是這和路由沒關係，這對剛開始使用的vue的同學可能會產生一點點困擾，其實這和頁面的聲明週期是相關的，這種情況出現的原因是因為頁面在加載後他的大多數鉤子函數（mounted，computed…）就不會再次出發了，所以導致頁面感覺沒有跳躍。

一道這種業務需求其實也比較好處理，其實我們不需要頁面切換，我們只需要頁面中的資料改變就好了，我們可以在頁面中監聽路由位址的變化，當位址變化的時候，我們就重新載入資料。

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

每當路由發生變化的時候上面的函數都會被觸發，我們可以在這個函數中對頁面的資料進行重新載入的操作。如果頁面結構變化很大，還是建議單獨新建一個不同的頁面。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

JS中用EL表達式取得上下文參數值的方法

##JS實作左邊列表移到到右邊列表功能

js中el表達式的使用與非空判斷方法#

以上是解決vue多個路由共用一個頁面的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！