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` 访问参数。

相关问题

vue跳转路由带参不刷新数据

在Vue.js中，如果你想从一个页面通过路由跳转到另一个页面，并传递参数同时避免页面刷新导致的数据丢失或不必要的重新获取，可以使用`this.$router.push`方法，并结合Vue组件内的`$route`对象。

例如，假设你有一个列表页(List.vue)和详情页(Detail.vue)，你可以这样做：

1. 列表页点击事件处理函数中：

// 在List.vue的某个方法中
this.$router.push({
  name: 'detail', // 如果使用命名路由
  params: { id: item.id } // 或者使用params对象传递动态参数
})

2. 接收参数并使用它：

// Detail.vue中接收参数
export default {
  computed: {
    selectedItem() {
      return this.$route.params.id; // 获取通过params传递的id
    }
  }
}

当从列表页跳转到详情页时，因为是基于URL的参数传递，所以数据不会重新加载，除非你在详情页内部进行了手动的刷新操作或触发了API请求。

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参数只能通过路由跳转来修改。