面试题：Vue Router 中如何获取路由传递过来的参数？

在 Vue Router 中，可以通过以下几种方式获取路由传递过来的参数：

1. 通过 `$route` 对象

Vue Router 会将当前路由信息注入到每个组件的 $route 对象中。可以通过 $route 获取路由参数。

获取方式

路径参数（params）：通过 $route.params 获取。
查询参数（query）：通过 $route.query 获取。

示例

export default {
  mounted() {
    // 获取路径参数
    const id = this.$route.params.id;
    console.log('路径参数 id:', id);

    // 获取查询参数
    const name = this.$route.query.name;
    console.log('查询参数 name:', name);
  }
};

路由配置

const routes = [
  {
    path: '/user/:id', // 动态路径参数
    component: User
  }
];

URL 示例

路径参数：/user/123 → this.$route.params.id 为 123。
查询参数：/user/123?name=John → this.$route.query.name 为 John。

2. 通过 `props` 解耦

Vue Router 支持将路由参数作为组件的 props 传递，这样可以避免在组件中直接依赖 $route 对象，使组件更易于复用和测试。

使用方式

在路由配置中启用 props，并将参数映射到组件的 props。

示例

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // 将路径参数映射为组件的 props
  },
  {
    path: '/profile',
    component: Profile,
    props: (route) => ({ query: route.query }) // 将查询参数映射为组件的 props
  }
];

组件中使用

export default {
  props: {
    id: {
      type: String,
      required: true
    },
    query: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    console.log('路径参数 id:', this.id);
    console.log('查询参数 query:', this.query);
  }
};

3. 通过 `watch` 监听路由变化

如果路由参数发生变化（例如从 /user/1 跳转到 /user/2），组件不会重新创建，而是复用。此时可以通过 watch 监听 $route 的变化来获取新的参数。

示例

export default {
  watch: {
    '$route'(to, from) {
      // 监听路由变化
      console.log('新的路径参数 id:', to.params.id);
      console.log('新的查询参数 name:', to.query.name);
    }
  }
};

4. 通过 `beforeRouteUpdate` 导航守卫

在组件内部，可以使用 beforeRouteUpdate 导航守卫来监听路由参数的变化。

示例

export default {
  beforeRouteUpdate(to, from, next) {
    // 获取新的路由参数
    console.log('新的路径参数 id:', to.params.id);
    console.log('新的查询参数 name:', to.query.name);
    next(); // 必须调用 next() 继续导航
  }
};

5. 通过 `useRoute`（Vue 3 Composition API）

在 Vue 3 中，可以使用 useRoute 钩子函数获取当前路由信息。

示例

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    // 获取路径参数
    const id = route.params.id;
    console.log('路径参数 id:', id);

    // 获取查询参数
    const name = route.query.name;
    console.log('查询参数 name:', name);

    return {
      id,
      name
    };
  }
};

总结

方法	适用场景	特点
`$route` 对象	直接获取当前路由参数。	简单直接，但组件与路由耦合。
`props` 解耦	将路由参数作为组件的 `props` 传递。	解耦组件与路由，提高组件复用性。
`watch` 监听路由变化	监听路由参数变化，适用于组件复用的场景。	需要手动监听，适合复杂场景。
`beforeRouteUpdate` 守卫	在路由参数变化时执行逻辑。	适合在导航守卫中处理逻辑。
`useRoute`（Vue 3）	在 Vue 3 Composition API 中获取路由信息。	适合 Vue 3 项目，代码更简洁。