vue3路由器如何传值

在Vue3中，可以通过路由的传参方式来传递参数。下面是一些常见的传参方式：

1.通过params传参：

在路由定义中写入参数，例如：

{
  path: '/detail/:id',
  name: 'detail',
  component: Detail
}

跳转页面时使用$route.params传参，例如：

this.$router.push({name: 'detail', params: {id: 1}})

接收参数时，可以在页面中使用$route.params.id来获取。

2.通过query传参：

在路由定义中写入参数，例如：

{
  path: '/detail',
  name: 'detail',
  component: Detail
}

跳转页面时使用$route.query传参，例如：

this.$router.push({name: 'detail', query: {id: 1}})

接收参数时，可以在页面中使用$route.query.id来获取。

3.通过props传参：

在路由定义中写入参数，例如：

{
  path: '/detail',
  name: 'detail',
  component: Detail,
  props: { id: 1 }
}

在页面组件中，可以直接使用props来获取参数：

export default {
  name: 'Detail',
  props: ['id'],
  data() {
    return {
      title: `详情${this.id}`
    }
  }
}

这种方式需要在路由定义中使用props进行参数配置，并且不能使用$route来获取参数。

4.通过state传参：

在路由定义中写入参数，例如：

{
  path: '/detail',
  name: 'detail',
  component: Detail,
  meta: { id: 1 }
}

在页面中，可以通过$route.meta.id来获取参数。这种方式可以传递更加复杂的数据，但是需要使用元信息传递，比较麻烦。

除了以上的几种方式，还可以使用路由钩子函数beforeEnter或者全局路由守卫来传递参数。