解决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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
js闭包的用途详解
Nov 09 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
ios中视频的最后一桢问题解决
May 14 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
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
剖析 PHP 中的输出缓冲
2006/12/21 PHP
用php解析html的实现代码
2011/08/08 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python正则表达式的使用
2017/06/12 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
文秘大学生求职信
2014/02/25 职场文书
葬礼司仪主持词
2014/03/31 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
党员检讨书范文
2014/12/27 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
网络研修随笔感言
2015/11/18 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书