解决vue-router中的query动态传参问题
更新时间：2018年03月20日 15:04:18 作者：Dear_Mr
下面小编就为大家分享一篇解决vue-router中的query动态传参问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在写项目，在写项目的过程会总发现这样或者那样的问题，比如说vue-router中的query如何传递动态的参数，经过了一些波折才解决了问题，问题描述如下：
希望跳转的时候url是这样的：http://localhost:8080/editmovie?id=****
<li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">修改</router-link></li>
但是呢？上面的只是一个静态的，url永远会是：http://localhost:8080/editmovie?id=111
实际上我需要的id是放在一个隐藏的元素中的：
<li class="hiden">2016987</li>
刚开始我的想法就是，想调用组件中的methods中的方法，但是尝试了几次，都失败了，之后偶然看到一个问答
vue-router动态配置传入参数问题，然后我又看到下面的代码：
<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动态传参问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于Vue+ElementUI的省市区地址选择通用组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家介绍了富文本编辑器quill.js 开发之自定义插件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
文章介绍了Vue单页应用中出现404错误的原因,以及如何通过配置Nginx和使用Vue Router的hash模式来解决这个问题,同时,文章还简要解释了单页应用的概念及其优点和缺点,并讨论了Router的实现方式2024-12-12
v-model 是 Vue.js 中一个重要的指令,它提供了一种简洁的方式来实现双向数据绑定,下面小编就来带大家深入了解下vue双向数据绑定的原理与应用吧2023-09-09
这篇文章主要为大家介绍了vue.js实现一个瀑布流的组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了如何在你的Vue项目中实现累加动画，文中的示例代码简洁易懂，具有一定的参考价值，感兴趣的小伙伴可以了解一下2023-06-06
这篇文章主要介绍了electron-builder打包vue2项目问题总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了为大家详细几种长按事件的需求，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论