解决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面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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 事务处理数据实现代码
2010/05/13 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
js实现返回顶部效果
2017/03/10 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
Python中optparser库用法实例详解
2018/01/26 Python
python开启debug模式的方法
2019/06/27 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python如何将字符串转换为日期
2020/07/31 Python
python数据抓取3种方法总结
2021/02/07 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
倡议书格式及范文
2015/04/29 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL