【获取地址栏的搜索关键字】功能-总结

需求：

 vue 获取地址栏 url 后面的参数

实现步骤：

方法一：使用 Vue Router 的 $route.query（推荐）

$route.query 是 Vue Router 提供的一个对象，用于获取 URL 中以 ? 开头的查询参数。如果项目使用了Vue Router，可以直接通过 $route.query 获取查询参数。

例如，对于 URL `http://example.com/?keyword=vue`，可以通过以下代码获取关键字：

const keyword = this.$route.query.keyword;
console.log(keyword); // 输出 "vue"

适用场景：

• 适用于 Vue 2 和 Vue 3 的 Options API 写法。
• 适用于直接访问查询参数的场景，如搜索关键字、过滤条件等 。

方法二：使用 useRoute() 钩子（Vue 3 Composition API）

在 Vue 3 中，可以使用 useRoute() 钩子获取当前路由信息，并通过 route.query 获取查询参数。例如：

import { useRoute } from 'vue-router';
import { onMounted } from 'vue';export default {setup() {const route = useRoute();onMounted(() => {const keyword = route.query.keyword;console.log("地址栏搜索关键字是：", keyword);});}
};

适用场景：

• 适用于 Vue 3 的 Composition API 写法。
• 提供更灵活的代码组织方式，适合逻辑复杂的组件 。
  

注意事项：

1. 参数编码问题 

如果 URL 中的参数包含特殊字符（如空格、中文等），建议使用 decodeURIComponent() 进行解码，例如：

  const keyword = decodeURIComponent(this.$route.query.keyword);

2. 参数不存在时的处理

在访问查询参数前，建议检查参数是否存在，以避免 undefined 错误：

const keyword = this.$route.query.keyword || "默认值";

3. 路由配置

确保项目已正确配置 Vue Router，否则 $route 和 useRoute() 将无法正常工作 。

总结：

• 在 Vue 2 中，推荐使用 $route.query 获取查询参数。
• 在 Vue 3 中，推荐使用 useRoute() 钩子结合 route.query 获取查询参数。
• 注意处理参数编码和参数不存在的情况，以提高代码的健壮性。