使用query参数_来看看一个简单的例子_这种方法适合RESTful风格的路由设计
作者：机器人技术佬 | 发布时间：2025-07-09 |
一、使用query参数
在Vue中，使用query参数来动态传递参数到URL是非常简单直观的。你只需要在路由对象中添加一些属性，然后传递一个对象，每个属性就代表一个查询参数。来看看一个简单的例子： ```javascript this.$router.push({ path: '/user', query: { userId: 123 } }); ``` 在这个例子中，`/user` 是目标路径，`{ userId: 123 }` 是包含查询参数的对象。这样就能轻松地将动态参数添加到URL中啦！ 优点： * 简单易用：代码清晰，易于理解。 * 参数可见：参数在URL中清晰可见，方便调试和分享。 示例代码： 假设我们有一个Vue组件，需要根据用户输入的内容生成一个URL，并在页面跳转时将用户输入的内容作为查询参数传递： ```javascript
``` 获取参数： 在商品详情组件中，你可以通过以下代码来获取商品ID： ```javascript export default { computed: { productId() { return this.$route.params.productId; } } }; ```