Vue3获取地址栏参数

在Vue3中，使用组合式API获取地址栏参数的步骤如下：

1. 使用 useRoute 获取路由信息

在组件中引入 vue-router 提供的 useRoute 函数，通过它访问当前路由信息。

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

// 获取查询参数（例如：?id=123）
const id = route.query.id;

// 获取动态路由参数（例如：/user/:id）
const dynamicId = route.params.id;
</script>

2. 监听参数变化

若需响应地址栏参数的变化，使用 watch 或 watchEffect 监听路由对象：

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

const route = useRoute();

// 监听查询参数 id 的变化
watch(() => route.query.id, (newId) => {
  console.log('ID变化:', newId);
  // 执行数据更新等操作
});

// 或者使用 watchEffect
import { watchEffect } from 'vue';
watchEffect(() => {
  const currentId = route.query.id;
  // 根据 currentId 执行操作
});
</script>

3. 处理默认值及错误情况

确保参数不存在时提供默认值或进行验证：

<script setup>
const id = route.query.id || 'defaultID'; // 默认值
const hasId = !!route.query.id; // 检查是否存在
</script>

完整示例

<template>
  <div>
    <p>查询参数ID: {{ id }}</p>
    <p>动态路由ID: {{ dynamicId }}</p>
  </div>
</template>

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

const route = useRoute();

// 获取参数
const id = route.query.id || '未提供ID';
const dynamicId = route.params.id || '无动态ID';

// 监听查询参数变化
watch(() => route.query.id, (newId) => {
  console.log('新ID:', newId);
});
</script>

注意事项

• 响应性：route 对象是响应式的，直接使用 route.query.id 可保持响应性。
• 避免解构：不要直接解构 route.query，否则会失去响应性。例如，const { id } = route.query 中的 id 不会更新。
• 路由版本：确保使用 vue-router@4.x 以兼容Vue3。

通过上述方法，即可在Vue3中有效获取和响应地址栏参数变化。