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

【狼蚁网站SEO优化长沙网络推广分享】如何在vue-router中实现动态query传参？

在前端开发过程中，我们常常遇到各种技术挑战，比如如何在vue-router中实现动态的query参数传递。这是一个很实际的问题，尤其是在使用vue-router进行页面跳转时。最近，我遇到并解决了这个问题，现在就来为大家详细一下。

问题描述：我们希望跳转的时候url是这样的

实际上，我们需要的id是放在一个隐藏的元素中的。例如我们有这样一个隐藏的li元素：

在尝试调用组件中的methods方法失败后，我们偶然看到一个关于vue-router动态配置传入参数的解答。一下子有了思路：我们可以使用v-for遍历数据，并动态绑定每个元素的id到data中的id，然后在router-link中使用这个绑定的id作为query参数。

代码示例如下：

```html

```

受此启发，我们可以将隐藏元素中的id值绑定到li元素的id上，然后在router-link中使用这个绑定的id作为query参数。具体实现如下：

```html

```

在Vue组件中，我们需要做的工作就是获取隐藏元素中的id值，并将其存储到data中的id属性中。具体代码如下：

```javascript

export default {

name : 'Movie',

data() {

return {

id : ""

}

},

methods: {

getId () {

var id = $('.hiden').eq(0).text();

console.log(id); // 打印获取到的id值

}

},

mounted() { // 组件挂载完成后执行

this.id = $('.hiden').eq(0).text(); // 获取隐藏元素中的id值并存储到data中的id属性中

},

components : { // 注册组件（此处为示例，实际项目中按需注册）

Heade,

Foot

}

}

```

至此，当我们点击“修改”链接时，url就会变成