javascript - vue3中，关于查询返回后参数的问题？

Question

我有很多个页面，大部分都是上下结构，上面查询条件，下面表格，然后表格后面是操作按钮，点击详情url带上查询条件跳转到详情，返回的时候参数没了，现在需要返回的时候保留参数

问题：
因为页面比较多，请问怎么能在最小的改动下实现这个需求
Ps：查询条件的表单都是每个页面独立使用的，没有统一封装

Answer 1

以为不知道怎么返回, 那么也可以使用导航守卫:

const UserDetails = {  template: `...`,  beforeRouteEnter(to, from) {    // 在渲染该组件的对应路由被验证前调用    // 不能获取组件实例 `this` ！    // 因为当守卫执行时，组件实例还没被创建！  },  beforeRouteUpdate(to, from) {    // 在当前路由改变，但是该组件被复用时调用    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`  },  beforeRouteLeave(to, from) {    // 在导航离开渲染该组件的对应路由时调用    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`  },}

可以在离开时存起来, 回来时在加上

https://router.vuejs.org/zh/guide/advanced/navigation-guards....

使用keepalive就行了, 改动非常小, 使用vue, 可以根据目前的项目架构全局加应该也非常方便

https://cn.vuejs.org/guide/built-ins/keep-alive.html

Answer 2

你可以使用 Vue3 的路由守卫（Route Guards）来实现这个需求。具体来说，你可以在路由配置中使用 beforeRouteLeave 守卫，该守卫在路由离开时触发，可以在这个守卫中保存并恢复查询参数。

首先，你需要在你的路由配置中添加 beforeRouteLeave 守卫：

const routes = [  {    path: '/page',    component: PageComponent,    beforeRouteLeave: (to, from, next) => {      // 将查询参数保存到 sessionStorage 中      sessionStorage.setItem('queryParams', JSON.stringify(to.query));      next();    }  },  // 其他路由配置...];

在这个例子中，我们在 beforeRouteLeave 守卫中把查询参数保存到了 sessionStorage 中。这样，当用户离开当前页面时，查询参数就会被保存下来。

然后，你需要在你的组件中添加一个生命周期钩子 mounted，在这个钩子中从 sessionStorage 中恢复查询参数：

export default {  data() {    return {      queryParams: null,    };  },  mounted() {    // 从 sessionStorage 中恢复查询参数    this.queryParams = JSON.parse(sessionStorage.getItem('queryParams'));  },  beforeRouteLeave(to, from, next) {    // 将查询参数保存到 sessionStorage 中    sessionStorage.setItem('queryParams', JSON.stringify(to.query));    next();  },  methods: {    goToDetail() {      // 跳转到详情页，并带上查询参数      router.push({ path: '/detail', query: this.queryParams });    },  },};

在这个例子中，我们在 mounted 钩子中从 sessionStorage 中恢复了查询参数，并在 goToDetail 方法中跳转到了详情页，并带上了查询参数。这样，当用户返回时，查询参数就会被保留下来。