解決vue多個路由共用一個頁面的問題
更新時間：2018年03月12日 16:18:56 作者：_gunner_
下面小編就為大家分享一篇解決vue多個路由共用一個頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在日常的vue開發(fā)中我們可能會遇見多個路由需要共用一個頁面的需求，特別是當路由是通過動態(tài)添加的，不同的路由展示的東西只是數據不同其他沒有變化。例如：
let routes = [
{path:"/zhanshan",
components:Person,
},
{path:"/lisi",
components:Person,
},
{path:"/wangwu",
components:Person,
}
]
這種情況的時候，我們發(fā)現，其實我們的頁面在第一次加載成功后就不會再加載了。所以頁面一直顯示第一次加載的數據，給人的趕腳好像路由沒有生效，而我們通過觀察瀏覽器地址欄中的變化可以確定的是這和路由沒關系，這對剛剛開始使用的vue的同學可能會產生一點點困擾，其實這和頁面的聲明周期是相關的，這種情況出現的原因是因為頁面在加載后他的大多數鉤子函數（mounted，computed…）就不會再次出發(fā)了，所以導致頁面感覺沒有跳轉。
一道這種業(yè)務需求其實也比較好處理，其實我們不需要頁面切換，我們只需要頁面中的數據發(fā)生改變就好了，我們可以在頁面中監(jiān)聽路由地址的變化，當地址變化的時候，我們就重新加載數據。
watch:{
"$route":function(to,from){
//from 對象中包含當前地址
//to 對象中包含目標地址
//其實還有一個next參數的，這個參數是控制路由是否跳轉的，如果沒寫，可以不用寫next()來代表允許路由跳轉，如果寫了就必須寫next(),否則路由是不會生效的。
}
}
每當路由發(fā)生變化的時候上面的函數都會被觸發(fā)，我們可以在這個函數中對頁面的數據進行重新加載的操作。如果頁面結構變化很大，還是建議單獨新建一個不同的頁面。
上面的問題可能對新入門vue的朋友有用，對vue比較了解了的朋友請繞過。
這篇解決vue多個路由共用一個頁面的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細的介紹了兩個的用法和區(qū)別，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了Vue源碼解析之數組變異的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實際需要時再進行,雖然 Vue3.x 沒有一個直接對應的 lazy 函數,但我們可以通過動態(tài)導入和 defineAsyncComponent 方法來實現類似的效果,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue 插值表達式Mustache的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue關于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
element 結合vue 在表單驗證時有值卻提示錯誤的解決辦法
這篇文章主要介紹了element 結合vue 在表單驗證下，有值卻提示錯誤的解決辦法,需要的朋友可以參考下2018-01-01
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數的this方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
面包屑功能是我們在項目中經常遇到的功能，今天小編使用Element-UI 進行實現在vue項目中實現面包屑功能，具體實現方式大家跟隨小編一起學習吧2019-07-07
在 Vue.js 的項目中，如果項目結構簡單， 父子組件之間的數據傳遞可以使用 props 或者 $emit 等方式，如果是大型項目，很多時候都需要在子組件之間傳遞數據，使用vue的狀態(tài)管理工具vuex很好的解決2018-08-08