vue3 跳转路由带参params后页面空白

在 Vue3 中，跳转路由带参可以使用 `route` 对象，具体实现方式如下：

1. 在跳转时使用 `router.push` 方法，并传递一个包含参数的对象，如下所示：

router.push({
  name: 'myRouteName',
  params: { id: myId }
})

2. 在目标组件中，使用 `$route.params` 访问参数，如下所示：

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

如果在跳转路由带参后页面出现空白，可能是因为目标组件没有正确获取参数。请确保目标组件中使用 `$route.params` 访问参数，并且参数名称正确无误。另外，也可以在跳转路由时使用 `query` 参数，而不是 `params` 参数，具体实现方式如下：

router.push({
  name: 'myRouteName',
  query: { id: myId }
})

在目标组件中，使用 `$route.query` 访问参数。

相关问题

vue3路由跳转params传参

Vue3中的路由传参有两种方式：query和params。

query是通过URL中的查询参数传递参数，例如：/user?id=123&name=张三。在路由配置中，可以使用props属性将query参数映射到组件的props中。

params是通过URL中的路径参数传递参数，例如：/user/123。在路由配置中，需要使用动态路由配置来定义路径参数，例如：/user/:id。在组件中可以通过$route.params来获取路径参数。

需要注意的是，query参数是可选的，而params参数是必须的。另外，query参数可以在URL中直接修改，而params参数只能通过路由跳转来修改。

vue路由跳转query和params

Vue路由跳转可以使用query和params两种方式传递参数。

query是通过URL参数传递的，可以在URL中看到参数，例如：/user?id=123&name=张三。在路由跳转时，可以使用$route.query来获取参数。

params是通过路由路径传递的，参数不会在URL中显示，例如：/user/123/张三。在路由跳转时，可以使用$route.params来获取参数。

需要注意的是，使用params传递参数时，需要在路由配置中定义参数名，例如：

{
  path: '/user/:id/:name',
  component: User
}

在跳转时，可以这样使用：

this.$router.push({ path: '/user/123/张三' })

在User组件中，可以通过$route.params.id和$route.params.name来获取参数。

总之，query和params都是用来传递参数的，具体使用哪种方式，取决于具体的需求和场景。