Vue页面跳转后搜索框内容缓存方法 | 使用路由参数实现搜索框内容保留

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: '',
    };
  },
  mounted() {
    this.keyword = this.$route.params.keyword;
  },
  methods: {
    search() {
      // 处理搜索逻辑
      // 跳转到搜索结果页面时，需要将搜索框的内容作为参数传递给路由
      this.$router.push(`/search/${this.keyword}`);
    },
  },
};
</script>
<p>{ path: '/search/:keyword', component: SearchResult, }</p>