params参数vue（深入了解Vue中的params参数）

深入了解Vue中的params参数

什么是params参数？

params是Vue Router的一种路由形式，它与查询参数(query)不同，params是通过路由路径中的占位符(例如：/user/:id)来传递参数，而查询参数则是通过查询字符串传递(例如：/user?id=123)。

如何使用params参数？

在路由路径中通过“:”定义占位符并在Vue组件的$route.params中访问它们。例如：

<!-- 路由定义 -->
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      component: User,
    }
  ]
})
<!-- 访问params参数 -->
export default {
  name: 'User',
  mounted () {
    console.log(this.$route.params.userId)
  }
}

params参数的注意事项

1.由于params参数是通过路径传递的，因此它们必须有一个占位符。

2.当使用编程式导航时，params参数必须作为对象的属性传递。例如：

// 通过对象传递params参数
this.$router.push({ path: '/user/' + userId })
// 通过命名路由传递params参数
this.$router.push({ name: 'user', params: { userId: 123 }})

3.路由参数必须是字符串。如果您需要传递数字，请在路由定义中使用“String”模式。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id(\\\\d+)',
      component: User,
    }
  ]
})

总结

params参数是Vue Router中的一种路由形式，通过路径中的占位符传递参数。我们可以通过$route.params访问它们，并且在编程式导航时，必须将它们作为对象的属性传递。但需要注意的是，路由参数必须是字符串，如果需要传递数字，需要使用“String”模式。