vue 获取路由参数

// 在 Vue 中获取路由参数的方式主要依赖于 vue-router。下面是一个简单的示例，展示如何在组件中获取路由参数。

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

// 在 User 组件中，你可以通过 this.$route.params 来获取路由参数。
export default {
  name: 'User',
  mounted() {
    // 获取路由中的 id 参数
    const userId = this.$route.params.id;
    console.log('User ID:', userId);

    // 如果你需要监听路由变化（例如用户直接修改了 URL），可以使用 watch 监听 $route
    this.$watch('$route', (to, from) => {
      // 当路由发生变化时，重新获取新的 id 参数
      const newUserId = to.params.id;
      console.log('New User ID:', newUserId);
    });
  }
}

解释说明：

• this.$route.params：用于获取动态路由参数。例如，在路径 /user/123 中，id 的值为 123。
• this.$watch('$route')：用于监听路由的变化，确保当用户手动修改 URL 或通过其他方式改变路由时，能够及时获取最新的参数。

如果你需要在创建组件之前获取路由参数，也可以使用 beforeRouteEnter 导航守卫。