vue获取路由参数

// 在 Vue 中获取路由参数有几种常见的方式，具体取决于你使用的 Vue Router 版本。

// 假设我们有一个路由配置如下：
const routes = [
  { path: '/user/:id', component: User }
]

// 1. 在组件内使用 this.$route.params 获取参数
export default {
  mounted() {
    // 假设当前 URL 是 /user/123
    console.log(this.$route.params.id); // 输出 "123"
  }
}

// 2. 使用路由守卫 beforeEach 获取参数
router.beforeEach((to, from, next) => {
  console.log(to.params.id); // 如果目标路由是 /user/123，则输出 "123"
  next();
})

// 3. 使用 props 将参数传递给组件（推荐）
const routes = [
  { path: '/user/:id', component: User, props: true }
]

// 然后在组件中可以直接通过 props 接收参数
export default {
  props: ['id'],
  mounted() {
    console.log(this.id); // 输出 "123"
  }
}

解释说明：

1. this.$route.params：这是最直接的方式，在组件内部可以通过 this.$route.params 来访问路由参数。例如，如果你的路由路径是 /user/:id，那么你可以通过 this.$route.params.id 来获取 id 的值。

2. router.beforeEach：如果你想在导航到某个页面之前获取路由参数，可以使用全局前置守卫 beforeEach。它会在每次路由变化时触发，并且可以通过 to.params 访问参数。

3. props 传递参数：这是推荐的方式，尤其是在单文件组件中。你可以将路由参数作为 props 传递给组件，这样可以使代码更加清晰和模块化。