vue 项目如何获取路由参数

1. vue 项目如何获取路由参数

在 Vue 2 中使用 Vue Router 时，可以通过 $route.query 对象来访问路由的查询参数。

这里是如何获取这些参数的基本方法：

1.1. 在组件中获取查询参数

假设你的路由配置如下：

const routes = [
  {
    path: '/example',
    name: 'Example',
    component: ExampleComponent
  }
]

如果用户访问了 /example?param1=value1¶m2=value2，那么你可以在 ExampleComponent 组件中通过以下方式获取到 param1 和 param2 的值：

export default {
name: 'ExampleComponent',
mounted() {
    // 获取单个查询参数
    const param1 = this.$route.query.param1;
    console.log(param1); // 输出: value1

    // 获取所有查询参数
    const allParams = this.$route.query;
    console.log(allParams); // 输出: { param1: 'value1', param2: 'value2' }

    // 监听查询参数的变化（例如当用户点击浏览器的前进或后退按钮时）
    this.$watch('$route.query', (newQuery, oldQuery) => {
      console.log('Query changed from', oldQuery, 'to', newQuery);
    });
  }
}

1.2. 在导航守卫中获取查询参数

如果你需要在导航守卫（如 beforeEach）中处理查询参数，可以这样做：

router.beforeEach((to, from, next) => {
  const queryParam1 = to.query.param1;
  console.log(queryParam1); // 如果存在 param1 参数，则输出其值

  next();
})

1.3. 使用 this.$route.query 的注意事项

以上就是在 Vue 2 中如何获取路由查询参数的方法。