解决vue-router中的query动态传参问题


Posted in Javascript onMarch 20, 2018

最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说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动态传参问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
Jquery使用val方法读写value值
May 18 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
JS正则表达式验证中文字符
May 08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
vue数据传递--我有特殊的实现技巧
Mar 20 #Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
react-native封装插件swiper的使用方法
Mar 20 #Javascript
在vue项目中使用sass的配置方法
Mar 20 #Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 #Javascript
动态加载、移除js/css文件的示例代码
Mar 20 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
wxPython实现分隔窗口
2019/11/19 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
英语专业毕业生自我鉴定
2013/11/09 职场文书
资料员岗位职责
2013/11/17 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js