vue路由传参的四种方式 详细举例

Vue路由传参的四种方式如下：

1. 动态路由传参

在路由定义中使用冒号(:)占位符来定义动态路由参数，然后通过$route.params来获取参数。

例如，在路由定义中定义动态路由参数id：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

在组件中获取id参数：

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

2. 查询参数传参

将参数以键值对的形式添加到路由的查询参数中，然后通过$route.query来获取参数。

例如，在路由定义中添加查询参数：

const routes = [
  {
    path: '/user',
    component: User
  }
]

在组件中添加查询参数：

<router-link :to="{path: '/user', query: {id: 1}}">User</router-link>

在组件中获取id参数：

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

3. props传参

在路由定义中使用props属性来传递参数，然后在组件中通过props来接收参数。

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

const routes = [
  {
    path: '/user',
    component: User,
    props: { id: 1 }
  }
]

在组件中接收id参数：

export default {
  props: ['id'],
  mounted() {
    console.log(this.id)
  }
}

4. 路由元信息传参

在路由定义中添加meta属性来传递参数，然后在组件中通过$route.meta来获取参数。

例如，在路由定义中添加meta属性：

const routes = [
  {
    path: '/user',
    component: User,
    meta: { id: 1 }
  }
]

在组件中获取id参数：

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