解决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 相关文章推荐
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
javaScript语法总结
Nov 25 Javascript
ES6数组的扩展详解
Apr 25 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
JavaScript ES6的函数拓展
Jan 18 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
星际原理概述
2020/03/04 星际争霸
中东人咖啡哲学
2021/03/03 咖啡文化
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python实现电子词典
2020/04/23 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python tornado使用流生成图片的例子
2019/11/18 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
简单了解如何封装自己的Python包
2020/07/08 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
年级组长自我鉴定
2014/02/22 职场文书
先进集体申报材料
2014/12/25 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书