首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3路由取参数

vue3在路由里取参数几种常见的方法

2025-06-05 10:49:42 作者：用心去追梦

这篇文章主要给大家介绍了关于vue3在路由里取参数几种常见的方法,可使用$route（OptionsAPI）、useRoute（CompositionAPI）及watch监听,动态参数通过params获取,查询参数用query提取,需要的朋友可以参考下

在 Vue 3 中，使用 Vue Router 获取路由参数有多种方式。以下是几种常见的方法：

1. 通过 this.$route 获取（Options API）

如果你使用的是 Options API，可以通过 this.$route 访问路由对象，并从中提取参数。

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

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

2. 通过 useRoute 获取（Composition API）

在 Composition API 中，可以使用 useRoute 钩子来获取路由信息。

import { useRoute } from 'vue-router';

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

    // 获取动态路由参数
    const id = route.params.id;
    console.log('Route Param:', id);

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

    return { id, queryParam };
  }
};

3. 监听参数变化

如果路由参数可能会发生变化（例如用户导航到同一个路由但参数不同），你需要监听参数的变化。

使用 watch

import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);

    // 监听路由参数变化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
        console.log('Updated Route Param:', newId);
      }
    );

    return { id };
  }
};

4. 动态路由参数示例

假设你的路由配置如下：

const routes = [
  {
    path: '/user/:id',
    component: UserComponent
  }
];

动态参数 id 可以通过 route.params.id 获取。
查询参数（如 /user/123?name=John）可以通过 route.query.name 获取。

5. 完整示例

以下是一个完整的示例，展示如何在组件中获取和监听路由参数：

<template>
  <div>
    <p>User ID: {{ id }}</p>
    <p>Query Param: {{ queryParam }}</p>
  </div>
</template>

<script>
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);
    const queryParam = ref(route.query.name);

    // 监听路由参数变化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
      }
    );

    // 监听查询参数变化
    watch(
      () => route.query.name,
      (newName) => {
        queryParam.value = newName;
      }
    );

    return { id, queryParam };
  }
};
</script>

注意事项

动态路由参数 vs 查询参数：
- 动态路由参数：定义在路径中的参数（如 /user/:id）。
- 查询参数：URL 中的查询字符串（如 /user?id=123&name=John）。
参数变化时重新加载数据：
如果路由参数发生变化，但组件没有重新加载（因为复用了相同的组件实例），需要手动监听参数变化并更新数据。

希望这些内容能帮助你顺利在 Vue 3 中获取路由参数！

总结

到此这篇关于vue3在路由里取参数几种常见的方法的文章就介绍到这了,更多相关vue3路由取参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！