欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年03月12日 16:18:56   作者：_gunner_  
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

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

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

相關(guān)文章

  • vue中v-model指令與.sync修飾符的區(qū)別詳解

    vue中v-model指令與.sync修飾符的區(qū)別詳解

    本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細(xì)的介紹了兩個(gè)的用法和區(qū)別，感興趣的可以了解一下
    2021-08-08
  • Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)

    Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)

    這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • 在Vue3.x中實(shí)現(xiàn)類似React.lazy效果的方法詳解

    在Vue3.x中實(shí)現(xiàn)類似React.lazy效果的方法詳解

    React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實(shí)際需要時(shí)再進(jìn)行,雖然 Vue3.x 沒(méi)有一個(gè)直接對(duì)應(yīng)的 lazy 函數(shù),但我們可以通過(guò)動(dòng)態(tài)導(dǎo)入和 defineAsyncComponent 方法來(lái)實(shí)現(xiàn)類似的效果,需要的朋友可以參考下
    2024-03-03
  • 簡(jiǎn)單了解vue 插值表達(dá)式Mustache

    簡(jiǎn)單了解vue 插值表達(dá)式Mustache

    這篇文章主要介紹了vue 插值表達(dá)式Mustache的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-07-07
  • Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問(wèn)題解決

    Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問(wèn)題解決

    這篇文章主要介紹了Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問(wèn)題解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-07-07
  • vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決

    vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決

    這篇文章主要介紹了vue關(guān)于eslint空格縮進(jìn)等的報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • element 結(jié)合vue 在表單驗(yàn)證時(shí)有值卻提示錯(cuò)誤的解決辦法

    element 結(jié)合vue 在表單驗(yàn)證時(shí)有值卻提示錯(cuò)誤的解決辦法

    這篇文章主要介紹了element 結(jié)合vue 在表單驗(yàn)證下，有值卻提示錯(cuò)誤的解決辦法,需要的朋友可以參考下
    2018-01-01
  • Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this

    Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this

    這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • Vue動(dòng)態(tài)面包屑功能的實(shí)現(xiàn)方法

    Vue動(dòng)態(tài)面包屑功能的實(shí)現(xiàn)方法

    面包屑功能是我們?cè)陧?xiàng)目中經(jīng)常遇到的功能，今天小編使用Element-UI 進(jìn)行實(shí)現(xiàn)在vue項(xiàng)目中實(shí)現(xiàn)面包屑功能，具體實(shí)現(xiàn)方式大家跟隨小編一起學(xué)習(xí)吧
    2019-07-07
  • Vue 與 Vuex 的第一次接觸遇到的坑

    Vue 與 Vuex 的第一次接觸遇到的坑

    在 Vue.js 的項(xiàng)目中，如果項(xiàng)目結(jié)構(gòu)簡(jiǎn)單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，如果是大型項(xiàng)目，很多時(shí)候都需要在子組件之間傳遞數(shù)據(jù)，使用vue的狀態(tài)管理工具vuex很好的解決
    2018-08-08

最新評(píng)論