解决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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
react 生命周期实例分析
2020/05/18 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
在python 中实现运行多条shell命令
2019/01/07 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
实验教师岗位职责
2014/02/13 职场文书
青年志愿者活动总结
2014/04/26 职场文书
中考标语大全
2014/06/05 职场文书
中秋晚会活动方案
2014/08/31 职场文书
解除同居协议书
2015/01/29 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书