解决vue-router中的query动态传参问题
更新时间：2018年03月20日 15:04:18 作者：Dear_Mr
下面小编就为大家分享一篇解决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>{{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请求本地自己编写的json文件，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本文主要是给大家分享利用混入mixins来实现全局变量和函数。这种方法优点是ide会有方法、变量、筛选器提示。对vue中 利用混入定义全局变量、函数、筛选器的相关知识感兴趣的朋友，跟随小编一起看看吧2019-07-07
每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧2021-11-11
Vue路由组件的缓存keep-alive和include属性的具体使用
：浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下2023-11-11
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2022-12-12
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章将利用Vue3和Canvas编写一个童年经典游戏—坦克大战，文中的示例代码讲解详细，感兴趣的小伙伴快来跟随小编一起学习一下吧2022-03-03
Vue使用v-model封装el-pagination组件的全过程
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧2021-07-07
关于vue项目vue-cli-service启动报错失败问题的解决方法
前端拉取代码后,想要运行代码的时候可以能遇到启动报错的问题,这里我们只针对于vue-cli-service报错项来说,文中通过图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-08-08
最新评论