如何实现vue-router中query动态传参

这次给大家带来如何实现vue-routerquery动态传参,实现vue-router中query动态传参的注意事项有哪些,下面就是实战案例,一起来看一下。

最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下:

希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=****

  • 修改
  • 登录后复制

    但是呢?上面的只是一个静态的,url永远会是:http://localhost:8080/editmovie?id=111

    实际上我需要的id是放在一个隐藏的元素中的:

  • 2016987
  • 登录后复制

    刚开始我的想法就是,想调用组件中的methods中的方法,但是尝试了几次,都失败了,之后偶然看到一个问答

    vue-router动态配置传入参数问题,然后我又看到下面的代码:

  • 如何实现vue-router中query动态传参

    {{el.tourism_name}} {{el.tog_line_id}}

    {{el.address}}

  • 登录后复制

    一下子感觉有了思路,解决办法如下:

    给li的id绑定了data中的id,然后query中写入绑定的这个就可以了

  • 修改
  • 登录后复制

    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 }}

    登录后复制

    相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

    推荐阅读:

    用JS检测电脑配置(附代码)

    怎样自定义设置vue项目打开关闭eslint校验

    以上就是如何实现vue-router中query动态传参的详细内容,更多请关注【创想鸟】其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

    发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2764551.html

    (0)
    上一篇 2025年3月8日 10:32:38
    下一篇 2025年3月8日 10:32:51

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    • Vue如何使用动态刷新Echarts组件

      这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下。 需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数…

      2025年3月8日
      200
    • 在vue-router里query动态传参步骤有哪些

      这次给大家带来在vue-router里query动态传参步骤有哪些,在vue-router里query动态传参的注意事项有哪些,下面就是实战案例,一起来看一下。 最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-rout…

      编程技术 2025年3月8日
      200
    • vue-router使用总结(附代码)

      这次给大家带来vue-router使用总结(附代码),vue-router使用的注意事项有哪些,下面就是实战案例,一起来看一下。 【相关推荐:vue面试题(2020)】  前言 今天面试被问到 vue的动态路由,我竟然没有回答上来,感觉不是…

      编程技术 2025年3月8日
      200
    • 详解ajax +jtemplate实现动态分页

      jtemplate是一个基于jquery的模板引擎插件,功能非常强大,有了她你就再不用为使用js绑定数据集而发愁了。本文给大家分享ajax +jtemplate实现动态分页,需要的朋友可以参考下本文 jtemplate是一个基于JQuery…

      编程技术 2025年3月8日
      200
    • 怎样对vue脚手架及vue-router进行使用

      这次给大家带来怎样对vue脚手架及vue-router进行使用,对vue脚手架及vue-router进行使用的注意事项有哪些,下面就是实战案例,一起来看一下。 首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官…

      2025年3月8日 编程技术
      200
    • 使用ajax技术无刷新动态调用新浪股票实时数据

      由于最近网速慢的缘故,查看股票信息时网页老是打不开。这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面 新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故,查看股票信息时网页老是打不开。这几天一直在研…

      编程技术 2025年3月8日
      200
    • 解决vue-router中的query动态传参问题

      下面我就为大家分享一篇解决vue-router中的query动态传参问题,具有很好的参考价值,希望对大家有所帮助。 最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一…

      编程技术 2025年3月8日
      200
    • 怎样利用Vue自定义动态组件

      这次给大家带来怎样利用Vue自定义动态组件,利用Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下。 现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时…

      2025年3月8日 编程技术
      200
    • 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

      这篇文章主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题,需要的朋友可以参考下 懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。 像vue这种单页面…

      编程技术 2025年3月8日
      200
    • 怎样使用JS做出动态添加HTML标记

      这次给大家带来怎样使用JS做出动态添加HTML标记,使用JS做出动态添加HTML标记的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现。 CreateEle…

      编程技术 2025年3月8日
      200

    发表回复

    登录后才能评论