资讯专栏INFORMATION COLUMN

vue 详情页返回列表页,保留列表页之前的筛选条件

lowett / 905人阅读

摘要:需求背景再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件。

需求背景
    再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件。 
    
之前的实现方法
    路由跳转的时候,把筛选条件json对象放到query中去,传到详情页,返回的时候再带回来,会导致在url后面一直会有这么一堆东西
新的实现方法:
**vuex + cookie**
    ### vuex ####
        state: {
            changeFilter: {}//变更列表筛选条件
        },
        mutations: {
            setChangeFilter (state, changeFilter) {
                state.changeFilter = changeFilter;
            }
        }
    
    ### cookie ###
        //设置cookie
        Vue.prototype.setCookie = function (name, value, day) {
            if (day !== 0) {
                var expires = day * 24 * 60 * 60 * 1000;
                var date = new Date(+new Date() + expires);
                document.cookie = name + "=" + escape(JSON.stringify(value)) + ";expires=" + date.toUTCString();
            } else {
                document.cookie = name + "=" + + escape(JSON.stringify(value));
            }
        };
        //获取cookie
        Vue.prototype.getCookie = function (name) {
            var arr;
            var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return JSON.parse(unescape(arr[2]));
            else 
                return null
        };
    ### list.vue ####
        var isFromDetailBol = false;//是否是从详情页过来的,来决定是否加载param
        methods: {
            goToDetail (id) {
                //设置cookie & vuex
                this.$store.commit("setChangeFilter",this.param)
                this.setCookie("changeFilter",this.param,1);
                this.$router.push({
                    path: "/versionflow/changeinfo",
                    query: {
                        id: id
                    }
                });
            }
        },
        created:function () {
            if ( isFromDetailBol) {
                var filter = (JSON.stringify(this.$store.state.changeFilter) == "{}") ? this.getCookie("changeFilter") : this.$store.state.changeFilter;
                if (JSON.stringify(filter) != "{}") {//这里不能使用 if(filter) ,filter为空的时候他的值为{}
                    this.param = filter;
                    this.currentPage = this.param.page;
                    this.changeTypeData.changeSelected = this.param.status;
                };
            };
          this.getBranchList(this.param);//进入列表页的时候请求数据的方法
        },
        beforeRouteEnter: function (to,from,next) {
            if (from.name == "changeinfo"){
                isFromDetailBol = true;
            };
            next();
            //一开始的时候我是在这里来进行数据的操作的,这里不能直接获得this,需要 next ((vm) =>{ vm.$stroe.state.changeFilter })这样获取,而且next里的方法要在create之后执行(这里他和组件其他钩子函数的执行顺序需要了解一下去           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97718.html

相关文章

  • Vue利用History记录上一数据方法实例

    摘要:使用开始支持,通过方式,将页码作为参数存储在中,将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关,因为需要灰度上线,万一有问题,要调整的页面也只有一个。 这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    Michael_Ding 评论0 收藏0
  • Vue利用History记录上一数据方法实例

    摘要:使用开始支持,通过方式,将页码作为参数存储在中,将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关,因为需要灰度上线,万一有问题,要调整的页面也只有一个。 这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    Magicer 评论0 收藏0
  • vue项目中keep-alive缓存,从详情返回列表时保存上一步信息

    摘要:问题由来最近用做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。从其他菜单进去,不需要缓存,要保持页面的初始状态。当进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。 问题由来 1、最近用vue做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。2、从其他菜单进去,不需要缓存,要保持页面的初始状态。基于上面...

    justjavac 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<