跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

解决vue-router中的query动态传参问题

下面我就为大家分享一篇解决 vue-router 中的query动态传参问题,具有很好的参考价值,希望对大家有所帮助。 最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题, 问题描述如下: 希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=****
  • 修改
  • 但是呢?上面的只是一个静态的,url永远会是:http://localhost:8080/editmovie?id=111 立即学习 “ 前端免费学习笔记(深入) ”; 实际上我需要的id是放在一个隐藏的元素中的:
  • 2016987
  • 刚开始我的想法就是,想调用组件中的methods中的方法,但是尝试了几次,都失败了,之后偶然看到一个问答 vue-router动态配置传入参数问题,然后我又看到下面的代码:
  • {{el.tourism_name}} {{el.tog_line_id}}

    {{el.address}}

  • 一下子感觉有了思路,解决办法如下: Vue-router参考手册 Vue-router参考手册下载 下载 给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 } }
    然后url就变成这样了:http://localhost:8080/editmovie?id=2016987,问题也就解决了。 上面是我整理给大家的,希望今后会对大家有帮助。 相关文章: Ajax发送和接收二进制字节流数据的方法 妙用Ajax技术实现局部刷新商品数量和总价实例代码 完美解决ajax访问遇到Session失效的问题

    相关文章