解決vue多個路由共用一個頁面的問題
在日常的vue開發(fā)中我們可能會遇見多個路由需要共用一個頁面的需求，特別是當路由是通過動態(tài)添加的，不同的路由展示的東西只是數(shù)據(jù)不同其他沒有變化。例如：
let routes = [
{path:"/zhanshan",
components:Person,
},
{path:"/lisi",
components:Person,
},
{path:"/wangwu",
components:Person,
}
]
這種情況的時候，我們發(fā)現(xiàn)，其實我們的頁面在第一次加載成功后就不會再加載了。所以頁面一直顯示第一次加載的數(shù)據(jù)，給人的趕腳好像路由沒有生效，而我們通過觀察瀏覽器地址欄中的變化可以確定的是這和路由沒關(guān)系，這對剛剛開始使用的vue的同學可能會產(chǎn)生一點點困擾，其實這和頁面的聲明周期是相關(guān)的，這種情況出現(xiàn)的原因是因為頁面在加載后他的大多數(shù)鉤子函數(shù)（mounted，computed…）就不會再次出發(fā)了，所以導致頁面感覺沒有跳轉(zhuǎn)。
一道這種業(yè)務(wù)需求其實也比較好處理，其實我們不需要頁面切換，我們只需要頁面中的數(shù)據(jù)發(fā)生改變就好了，我們可以在頁面中監(jiān)聽路由地址的變化，當?shù)刂纷兓臅r候，我們就重新加載數(shù)據(jù)。
watch:{
"$route":function(to,from){
//from 對象中包含當前地址
//to 對象中包含目標地址
//其實還有一個next參數(shù)的，這個參數(shù)是控制路由是否跳轉(zhuǎn)的，如果沒寫，可以不用寫next()來代表允許路由跳轉(zhuǎn)，如果寫了就必須寫next(),否則路由是不會生效的。
}
}
每當路由發(fā)生變化的時候上面的函數(shù)都會被觸發(fā)，我們可以在這個函數(shù)中對頁面的數(shù)據(jù)進行重新加載的操作。如果頁面結(jié)構(gòu)變化很大，還是建議單獨新建一個不同的頁面。
上面的問題可能對新入門vue的朋友有用，對vue比較了解了的朋友請繞過。
這篇解決vue多個路由共用一個頁面的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue-cli3 引入 font-awesome的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
最近開發(fā)遇到一個點擊導入按鈕讓excel文件數(shù)據(jù)導入在表格的需求,所以下面這篇文章主要給大家介紹了關(guān)于vue導入處理Excel表格功能步驟的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue中如何動態(tài)顯示表格內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用 Element UI Table 的 slot-scope方法
這篇文章主要介紹了使用 Element UI Table 的 slot-scope方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue3響應(yīng)式對象Reactive和Ref的用法解讀
這篇文章主要介紹了Vue3響應(yīng)式對象Reactive和Ref的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文詳細介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識點，有需要的朋友們參考下。2018-11-11