vue跳轉(zhuǎn)同一個(gè)組件,參數(shù)不同,頁面接收值只接收一次的解決方法

更新時(shí)間：2019年11月05日 15:07:58 作者：做夢i

今天小編就為大家分享一篇vue跳轉(zhuǎn)同一個(gè)組件,參數(shù)不同,頁面接收值只接收一次的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

作為vue的初用者，你可能會(huì)像我一樣遇到一個(gè)問題，對(duì)跳轉(zhuǎn)組件是，我們想通過參數(shù)不同，調(diào)用不同的方法。

例如：

app.vue

  <ul>
      <li class="navList" v-for="index in goods" :key="index.name">
       <router-link :to="{path:index.link,query:{type:index.name}}" >
        {{index.name}}
       </router-link>
      </li>
   </ul>

app…vue中的data數(shù)據(jù)：

goods:[
  {name:'女裝',link:'goods'},
  {name:'男裝',link:'goods'},
  ]

在goods.vue中接受數(shù)據(jù)

mounted(){
  this.stri=this.$route.query.type;
 }

當(dāng)我循環(huán)輸出這些鏈接，每個(gè)鏈接的地址都是一樣的。參數(shù)不一樣，當(dāng)我們點(diǎn)擊我們的按鈕時(shí)

我們只會(huì)看到導(dǎo)航欄中的參數(shù)在變化，然而我們頁面中的數(shù)并沒有變化。這是為什么呢？

相信很多朋友也已經(jīng)知道了，這是因?yàn)樘D(zhuǎn)同一個(gè)組件，這個(gè)組件在第一次，會(huì)執(zhí)行組件的生命周期中的步驟，但是第二次再跳轉(zhuǎn)該組件的時(shí)候，組件會(huì)被重用，所以不會(huì)再執(zhí)行生命周期中的某些過程，同樣mount也不會(huì)執(zhí)行，也就是說，不會(huì)執(zhí)行第二次賦值。

那我們應(yīng)該怎么獲取值呢？

這里有一個(gè)方法：

goods.vue

beforeRouteUpdate(to,from,next){
  this.stri=to.query.type;
  next();
 }

beforeRouteUpdate的作用就是監(jiān)聽在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用

這就是我們所需要的東西了。路由的地址變化了，組件也被復(fù)用了。

同樣的我能還可以使用另一種監(jiān)聽路由變化的方法：

 watch:{
  '$route'(to,from){
   this.stri=to.query.type
  }
 },

這個(gè)方法，和上面的beforeRouteUpdate起到一樣的效果。

如果你遇到的問題，和我所遇到的一樣，那么恭喜你，你也解決了這個(gè)問題。

以上這篇vue跳轉(zhuǎn)同一個(gè)組件,參數(shù)不同,頁面接收值只接收一次的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue大數(shù)據(jù)表格卡頓問題的完美解決方案
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue3動(dòng)態(tài)組件component不生效問題解決方法
動(dòng)態(tài)組件component是Vue中非常實(shí)用的一個(gè)功能,它可以根據(jù)條件動(dòng)態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動(dòng)態(tài)組件展示組件時(shí),組件就是不展示顯示空白,所以本文記錄了Vue3動(dòng)態(tài)組件component不生效問題解決方法,需要的朋友可以參考下
2024-08-08
vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
八種Vue組件間通訊方式合集(推薦)
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
如何在Vue項(xiàng)目中應(yīng)用TypeScript類
與如何在React項(xiàng)目中應(yīng)用TypeScript類類似在VUE項(xiàng)目中應(yīng)用typescript，我們需要引入一個(gè)庫vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹
2021-09-09
Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過程
近期,發(fā)現(xiàn)點(diǎn)擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-09-09
el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置的操作代碼
這篇文章主要介紹了el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
$解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本$
解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09