vue3搜索框内容持久化

Question

vue3路由跳转后搜索框内容不消失，值输入不点击搜索按钮也不消失，我用什么办法才能实现

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3搜索框内容持久化

你想要实现的是，当用户输入搜索框内容，然后路由跳转后，搜索框内容不消失，且输入的值不消失，即使用户没有点击搜索按钮。

Vue3 提供了多种方式来实现这个功能，以下是一些常见的方法：

1. 使用 localStorage 或 sessionStorage 将搜索框内容存储在本地存储中，然后在路由跳转后从本地存储中读取内容。

// 在搜索框输入内容时，存储内容
localStorage.setItem('searchInput', input.value);

// 在路由跳转后，读取内容
const searchInput = localStorage.getItem('searchInput');

1. 使用 Vuex 或 Pinia 将搜索框内容存储在状态管理中，然后在路由跳转后从状态管理中读取内容。

// 在搜索框输入内容时，存储内容
store.commit('setSearchInput', input.value);

// 在路由跳转后，读取内容
const searchInput = store.state.searchInput;

1. 使用 Vue 的生命周期钩子函数 beforeRouteLeave 将搜索框内容存储在路由元数据中，然后在路由跳转后从路由元数据中读取内容。

// 在搜索框输入内容时，存储内容
this.$router.push({
  path: '/search',
  query: { searchInput: input.value }
});

// 在路由跳转后，读取内容
const searchInput = this.$route.query.searchInput;

1. 使用 Vue 的计算属性将搜索框内容存储在计算属性中，然后在路由跳转后从计算属性中读取内容。

// 在搜索框输入内容时，存储内容
this.searchInput = input.value;

// 在路由跳转后，读取内容
const searchInput = this.searchInput;

这些方法都可以实现搜索框内容的持久化，但是需要根据你的具体需求和项目结构选择合适的方法。