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