溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在日常的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(),否則路由是不會生效的。
}
}
每當路由發生變化的時候上面的函數都會被觸發，我們可以在這個函數中對頁面的數據進行重新加載的操作。如果頁面結構變化很大，還是建議單獨新建一個不同的頁面。
上面的問題可能對新入門vue的朋友有用，對vue比較了解了的朋友請繞過。
這篇解決vue多個路由共用一個頁面的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
