关于vue-router中的query动态传参问题的解决
2017-06-02 12:09
615 查看
关于vue-router中的query动态传参问题的解决
最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说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 4000 >{{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动态传参问题
- 关于vue-router的beforeEach无限循环的问题解决
- 关于vue v-for循环解决img标签的src动态绑定问题
- 关于cakeph router admin问题的解决
- 【C#】wpf用MultiBinding解决Converter需要动态传参的问题,以Button为例
- 在使用vue-router遇到的问题以及解决办法
- 关于js传参问题解决的小窍门
- 关于动态页面在调用外部页面CSS样式IE6bug问题解决
- vue.js 关于router-link的相关样式问题
- 关于数据动态绑定问题的解决方法
- 关于vue-router路径计算问题
- 关于vue.js发布后路径引用的问题解决
- PB中关于动态工资项目问题的解决办法
- mybatis动态sql解决关于There is no getter for property named 'certitype'错误问题
- 学习vue框架,遇见router-view标签无法显示的问题解决
- 关于nodejs mysql 连接池query出的结果是乱码的解决问题
- 关于NGUI的动态加载后的刷新显示问题,解决办法!!
- 关于iframe自适应高度,解决一个iframe动态改变url,改变页面同时解决高度自适应问题
- 解决关于Vue父组件动态向子组件传递数据
- vue-router路由参数刷新消失的问题解决方法