路由传参方式

面试题：Vue 项目中前端路由传参方式有哪些？

路径参数
查询参数
路由状态参数
路由props参数

1. 路径参数

通过 params 获取路径参数

const routes = [
  { 
    path: '/users/:userId(\\d+)',
    component: User
  },
]

// vue2
this.$route.params.userId;
// vue3
const route = useRoute()
const id = route.params.id

2. 查询参数

通过 URL 中的查询字符串传递的参数，以 ?key=value 的形式进行传递。

特点：可以传递多组参数

// 使用 this.$router.push 传递查询参数
this.$router.push({ path: '/user', query: { id: '123' } });

// 获取参数
this.$route.query.id;

3. 路由状态参数

路由状态参数（Route State Parameters）是一种通过 router.push 或 router.replace 方法传递的参数，这些参数不会在 URL 中显示，而是在应用程序的内存中进行传递，此方式适合传递一些不希望在 URL 中公开显示的临时数据或敏感信息。

// 传递状态参数
this.$router.push({ path: '/user', state: { id: '123' } });

// 获取参数
history.state.id;

4. 路由props参数

在路由配置中设置 props: true 或传递一个函数，将路由的 params 或 query 直接作为组件的 props 传递给子组件。

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

vue

<script setup>
defineProps({
  id: {
    // ....
  }
})
</script>

Vue3课程《细节补充 - 路由组件传参》

面试题：Vue 项目中前端路由传参方式有哪些？
参考答案：
Vue 项目中前端路由传参的方式主要有这么几种：
路径参数：这种方式直观，路径直接反映参数的结构。适合用于需要在路径中明确表示的参数，如资源 ID。
查询参数：该方式可选参数使用方便，适合用于不确定的参数个数，或者需要在组件间传递较多的参数。
路由状态参数：参数不会出现在 URL 中，安全性更高，适合用于敏感信息的传递。
路由props参数：参数直接以 props 形式传入，这样能删除组件对 $route 的直接依赖，达到与 $route 解耦的效果。

-EOF-

路由传参方式 ​

路由传参方式