vue3 setup 第一个页面的搜索的关键词存起来点击搜索跳转到新页面并在新页面的搜索框自动填充关键字并搜索

在Vue3中，特别是在Composition API中（setup语法），如果你想要在第一个页面的搜索框保存关键字并在跳转到新页面时自动填充并搜索，可以这样做：

1. 首先，在`setup`中定义一个响应式的数据存储搜索关键字，例如在`App.vue`中：

import { ref } from 'vue';

const searchKeyword = ref('');

// 在组件卸载时清除搜索关键字，如路由守卫
onBeforeUnmount(() => {
  searchKeyword.value = '';
});

2. 在`<template>`部分添加一个搜索框，并绑定了`searchKeyword`：

<template>
  <div id="app">
    <input type="text" v-model="searchKeyword" @keyup.enter="handleSearch" />
    <button @click="handleSearch">搜索</button>
    <!-- 其他内容... -->
  </div>
</template>

3. 定义`handleSearch`方法，当用户点击搜索或按Enter键时，清空旧页面的搜索框并跳转到新页面，同时将`searchKeyword`作为查询参数传递：

methods: {
  handleSearch() {
    // 清除旧页面的搜索框
    searchKeyword.value = '';

    // 创建一个新的导航链接，带上了搜索关键字
    const link = `/search?keyword=${encodeURIComponent(searchKeyword.value)}`;

    // 跳转到新页面
    window.location.href = link;
  },
},

4. 新页面接收到`search`请求后，可以在`setup`中接收查询参数并初始化搜索框：

setup() {
  const $route = useRoute();

  let keywordFromParent = decodeURIComponent($route.query.keyword);

  // 在新页面的搜索框中预填搜索关键字
  watchEffect(() => {
    searchKeyword.value = keywordFromParent || '';
  });

  // 进行搜索逻辑...
}

**相关问题--:**
1. 如何在Vue3的setup里优雅地处理路由跳转？
2. 在新页面中，如果没有接收到query参数，怎么处理这种情况？
3. 是否有更好的方式防止在URL中暴露敏感的搜索关键字？