vue中params与query区别

Vue中params与query区别

在Vue中，我们经常会使用路由来进行页面的跳转和传递参数。在路由中，有两种常见的参数传递方式：params和query。虽然它们都可以用于传递参数，但是在使用和效果上有一些区别。

params

params是一种将参数直接附加在URL路径中的方式进行传递。例如：

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: User
  }
]
// 跳转页面
this.$router.push({ path: '/user/123' })

这样，我们就将参数id的值设置为123，并通过路径/user/123进行传递。在接收参数的组件中，可以通过$route.params来获取参数值。

// 接收参数
export default {
  mounted() {
    console.log(this.$route.params.id) // 输出：123
  }
}

使用params传递参数的优点是参数值可以直接显示在URL路径中，便于查看和调试。同时也支持动态路由，可以根据不同的参数值渲染不同的页面。

然而，params传递的参数在编程的过程中有一些限制。首先，参数必须在路由配置中提前定义，并且必须存在对应的路由。其次，参数值不能有特殊字符，否则会导致路由匹配失败。最后，对于同一个路由，如果只是参数发生了变化，Vue不会重新创建组件实例，而只会更新参数的值。

query

query是一种将参数添加在URL后面作为查询字符串进行传递的方式。例如：

// 路由配置
const routes = [
  {
    path: '/user',
    component: User
  }
]
// 跳转页面
this.$router.push({ path: '/user', query: { id: '123' } })

这样，我们将参数id的值设置为123，并通过URL路径/userid=123进行传递。在接收参数的组件中，可以通过$route.query来获取参数值。

// 接收参数
export default {
  mounted() {
    console.log(this.$route.query.id) // 输出：123
  }
}

使用query传递参数的优点是比较灵活，可以随意传递参数，并且参数值可以有特殊字符。同时也支持动态路由，可以根据不同的参数值渲染不同的页面。

然而，query传递的参数在URL中可见，不太安全，不适合传递敏感信息。而且，每次改变参数都会导致组件重新创建实例，可能会影响性能。

总结

params和query都可以用于传递参数，但是在使用时需要根据实际情况选择合适的方式。如果需要将参数直接显示在URL路径中，或者需要支持动态路由，可以使用params。如果需要传递灵活的参数，并且不要求参数在URL中可见，可以使用query。

在实际开发中，我们可以根据需求来灵活选择使用params或query，以达到最佳的用户体验和性能表现。