在 Vue 中，保存页面当前状态的原理主要有两种方法：持久化存储和路由导航。
持久化存储：使用浏览器的本地存储机制（如 LocalStorage 或 SessionStorage）来保存页面的状态。当页面重新加载时，可以从本地存储中读取已保存的状态数据，并在页面初始化时恢复。这种方法适用于需要跨页面或跨会话保存状态的场景。
示例代码：
// 保存数据到本地存储
localStorage.setItem('pageState', JSON.stringify(data));
// 从本地存储中读取数据 const savedState = localStorage.getItem('pageState');
const pageState = JSON.parse(savedState);
路由导航：使用 Vue Router 来管理页面路由，并利用路由参数或路由查询参数来传递和保存页面状态。在路由跳转时，可以通过修改路由参数或查询参数来更新页面状态，并在组件的生命周期钩子函数中根据参数值来恢复状态。这种方法适用于同一页面内的状态保存和切换。
示例代码：
// 跳转到带参数的路由
this.$router.push({ path: '/page', query: { state: JSON.stringify(data) } });
// 在目标页面的生命周期钩子函数中获取参数并恢复状态
created() { const state = JSON.parse(this.$route.query.state);
// 恢复状态操作
} ```
