时间戳

首页 > 解决方案 > 如何让列表页面记住一些参数？

javascript - 如何让列表页面记住一些参数？

问题描述

我有一个 Vue 项目，但我有一个问题，

在此处输入图像描述

在我的router.js：

{
      path: '/home/aftersale_physicalserver_workpanel/:use_flag/:areapartition_homeshowtext',
      meta: { keepAlive: true },
      icon: 'compose',
      name: 'aftersale_physicalserver_workpanel',
      title: 'work panel',
      component: resolve => {
        require(['./views/main_home/home/components/general_admin_staff_panel/physicalserver/physicalserver_workpanel.vue'], resolve);
      }
    },

有代码：

...
<template>
  <lml-page
     ref="lml_page_ref"
     v-if=" origin_data && origin_data.count"
     :data_count="origin_data.count"
     :current.sync="cur_page"
     @change_page_for_parent="server_change_page">
  </lml-page>
</template>
...

<script>
  export default {
  props: {
    ...
    cur_page: 1,
  },
</script>

你看到 cur_page 是页码。我希望 URL 附加页码。因为当我进入一个详细页面时，当我返回时，默认会转到第 1 页。

我的目的

我的目的是让 list_page 记住一些参数。比如上面的page_number，还有一些搜索参数。但在 Vue 中我不知道如何。

当我从搜索的参数页面输入详细信息页面时，当我返回时：

<span class="go-left" @click="$router.go(-1)">
   <Icon type="chevron-left"></Icon>
   <span>Go back</span>
</span>

将获得一个没有搜索数据的 list_page。

标签： javascriptvue.js

解决方案

您需要使用本地存储或中央状态，我使用的是这样的 vuex：

onPageChange: function (pageNo) {
        this.$store.dispatch(this.$mts.some.SOMETHING, pageNo);
      },

get然后，您可以根据需要和页码致电您的商店。查找有关如何设置状态管理的 vuex 文档。像这样：

this.page = this.$store.getters.some.page

推荐阅读