解決vue-router中的query動態(tài)傳參問題
最近在寫項(xiàng)目，在寫項(xiàng)目的過程會總發(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
實(shí)際上我需要的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+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
dhtmlxGantt是一個強(qiáng)大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
文章介紹了Vue單頁應(yīng)用中出現(xiàn)404錯誤的原因,以及如何通過配置Nginx和使用Vue Router的hash模式來解決這個問題,同時,文章還簡要解釋了單頁應(yīng)用的概念及其優(yōu)點(diǎn)和缺點(diǎn),并討論了Router的實(shí)現(xiàn)方式2024-12-12
v-model?是?Vue.js?中一個重要的指令,它提供了一種簡潔的方式來實(shí)現(xiàn)雙向數(shù)據(jù)綁定,下面小編就來帶大家深入了解下vue雙向數(shù)據(jù)綁定的原理與應(yīng)用吧2023-09-09
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)一個瀑布流的組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動畫
這篇文章主要為大家詳細(xì)介紹了如何在你的Vue項(xiàng)目中實(shí)現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下2023-06-06
electron-builder打包vue2項(xiàng)目問題總結(jié)
這篇文章主要介紹了electron-builder打包vue2項(xiàng)目問題總結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
使用vue實(shí)現(xiàn)滑動滾動條來加載數(shù)據(jù)
在vuejs中,我們經(jīng)常使用axios來請求數(shù)據(jù),但是有時候,我們請求的數(shù)據(jù)量很大,那么我們?nèi)绾螌?shí)現(xiàn)滑動滾動條來加載數(shù)據(jù)呢,接下來小編就給大家介紹一下在vuejs中如何實(shí)現(xiàn)滑動滾動條來動態(tài)加載數(shù)據(jù),需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了為大家詳細(xì)幾種長按事件的需求，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10