vue里query与param的差异

在Vue开发中，query和param是路由传参时常用的两种方式，它们在功能和使用场景上存在着一些明显的差异。

从表现形式上来看，query参数会在URL中以?开头，后面跟着一系列的键值对，多个参数之间用&连接，例如：http://example.com/page?name=张三&age=20 。这种形式直接暴露在URL中，用户可以直观地看到传递的参数。而param参数则是通过路径占位符的方式进行传递，例如在路由配置中定义路径为 /page/:id ，当访问 /page/123 时，123就是通过param传递的参数，URL看起来更加简洁。

在数据获取和使用方面，query参数可以通过 $route.query来获取。在组件中可以直接访问这个对象，获取到对应的参数值。例如，在上述例子中，可以通过this.$route.query.name获取到“张三” 。param参数则通过 $route.params来获取，如this.$route.params.id可以获取到路径中的参数值。

从使用场景上看，query参数适用于传递一些非必需的、可能会经常变化的信息。比如搜索页面的关键词、筛选条件等。用户可以通过修改URL中的query参数来改变搜索结果，而且即使参数不存在，页面也可以正常加载并显示默认内容。而param参数通常用于传递一些必需的、与具体资源相关的信息，比如文章的ID、用户的ID等。通过param参数可以明确地定位到具体的资源，当param参数不存在或不正确时，可能无法正确加载对应的资源。

在页面刷新和导航时，query参数会保留在URL中，而param参数会根据路由的变化而变化。如果需要在不同页面之间传递一些状态信息，query参数可能更加合适。

了解vue里query与param的差异，能够帮助开发者根据具体的业务需求选择合适的传参方式，提高开发效率和用户体验。