解決vue-router中的query動(dòng)態(tài)傳參問(wèn)題
最近在寫(xiě)項(xiàng)目，在寫(xiě)項(xiàng)目的過(guò)程會(huì)總發(fā)現(xiàn)這樣或者那樣的問(wèn)題，比如說(shuō)vue-router中的query如何傳遞動(dòng)態(tài)的參數(shù)，經(jīng)過(guò)了一些波折才解決了問(wèn)題，問(wèn)題描述如下：
希望跳轉(zhuǎn)的時(shí)候url是這樣的：http://localhost:8080/editmovie?id=****
<li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">修改</router-link></li>
但是呢？上面的只是一個(gè)靜態(tài)的，url永遠(yuǎn)會(huì)是：http://localhost:8080/editmovie?id=111
實(shí)際上我需要的id是放在一個(gè)隱藏的元素中的：
<li class="hiden">2016987</li>
剛開(kāi)始我的想法就是，想調(diào)用組件中的methods中的方法，但是嘗試了幾次，都失敗了，之后偶然看到一個(gè)問(wèn)答
vue-router動(dòng)態(tài)配置傳入?yún)?shù)問(wèn)題，然后我又看到下面的代碼：
<li v-for=" el in hotLins" >
<router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
<img :src="el.image_list[0]">
<h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
<p>{{el.address}}</p>
</router-link>
</li>
一下子感覺(jué)有了思路，解決辦法如下：
給li的id綁定了data中的id，然后query中寫(xiě)入綁定的這個(gè)就可以了
<li v-bind:id="id"><router-link :to="{path:'editmovie', query: {id : id}}" class="edit">修改</router-link></li>
export default {
name : 'Movie',
data() {
return {
id : ""
}
},
methods: {
getId () {
var id = $('.hiden').eq(0).text();
console.log(id);
}
},
mounted() {
this.id = $('.hiden').eq(0).text();
},
components : {
Heade,
Foot
}
}
然后url就變成這樣了：http://localhost:8080/editmovie?id=2016987，問(wèn)題也就解決了。
以上這篇解決vue-router中的query動(dòng)態(tài)傳參問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue請(qǐng)求本地自己編寫(xiě)的json文件的方法
這篇文章主要介紹了vue請(qǐng)求本地自己編寫(xiě)的json文件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue使用混入定義全局變量、函數(shù)、篩選器的實(shí)例代碼
本文主要是給大家分享利用混入mixins來(lái)實(shí)現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點(diǎn)是ide會(huì)有方法、變量、篩選器提示。對(duì)vue中 利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識(shí)感興趣的朋友，跟隨小編一起看看吧2019-07-07
關(guān)于vue中根據(jù)用戶(hù)權(quán)限動(dòng)態(tài)添加路由的問(wèn)題
每次路由發(fā)生變化時(shí)都需要調(diào)用一次路由守衛(wèi)，并且store中的數(shù)據(jù)會(huì)在每次刷新的時(shí)候清空，因此需要判斷store中是否有添加的動(dòng)態(tài)路由，本文給大家分享vue中根據(jù)用戶(hù)權(quán)限動(dòng)態(tài)添加路由的問(wèn)題，感興趣的朋友一起看看吧2021-11-11
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁(yè)面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷(xiāo)毀,通過(guò)緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
springboot+VUE實(shí)現(xiàn)登錄注冊(cè)
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Vue中computed和watch的區(qū)別小結(jié)
watch和computed都是以Vue的依賴(lài)追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴(lài)型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴(lài)這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡(jiǎn)單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2022-12-12
解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題
今天小編就為大家分享一篇解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫(xiě)一個(gè)童年經(jīng)典游戲—坦克大戰(zhàn)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2022-03-03
Vue使用v-model封裝el-pagination組件的全過(guò)程
通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類(lèi)似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)，對(duì)v-model封裝el-pagination組件相關(guān)知識(shí)感興趣的朋友一起看看吧2021-07-07
關(guān)于vue項(xiàng)目vue-cli-service啟動(dòng)報(bào)錯(cuò)失敗問(wèn)題的解決方法
前端拉取代碼后,想要運(yùn)行代碼的時(shí)候可以能遇到啟動(dòng)報(bào)錯(cuò)的問(wèn)題,這里我們只針對(duì)于vue-cli-service報(bào)錯(cuò)項(xiàng)來(lái)說(shuō),文中通過(guò)圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08