vue项目基于路由地址缓存筛选查询条件

需求背景

公司中后台项目表格页面的筛选查询条件需要进行缓存，在切换tab时，搜索关键词进行保留。

需求分析

对搜索的筛选查询条件进行缓存，就是找个合适的技术方案对其进行存储。

可实施方案

• 存储到vuex中；
• 存储到localStorage中；
• 利用url

最后所采取的方案是最后一种，利用url的变化来实现需求。主要原因有一下几点：

1. 因为接收的是进行中的项目，且每个表格页面最少有三个搜索条件，如果要利用vuex或localStorage来实现的话，需要增加很多字段以及工作量。
2. 利用监控url的变化来实现需求，不论后面任何一个页面添加几个查询条件，都易于扩展且改动较少。
3. 可以形成一个表格页面的轮子，提高工作效率也就是标准化。
4. 当客户针对与某条数据讨论时，只需要发送页面链接，即可快速定位所需要的数据。

项目环境

• iview ^3.1.3
• vue ^2.5.13
• vue-router ^3.0.1

代码实现

// 表格页面，html代码省略
improt fillUrl form 'mixin/fillUrl'
export default {
    name: 'table',
    mixins: [fillUrl]
    data(){
      currentRouteName: 'table',
      filters:{
        key1: '',
        key2: '',
        pageSize: 10，
        currentPage: 1
      }
    },
    methods:{
        search(){},
        getRouteData(vm){
            let params = {...vm.$route.query}
            // 当点击侧边栏跳转，url上的参数为空时
            if (Object.keys(params).length === 0) {
					vm.fillUrl(vm.filter)
					return
			}
			Object.assign(vm.filter, this.objectPropertiesInt(params, ['page', 'pageSize', 'key1','key2']))
			vm.getTableData(vm.filter)
        },
        changePage(val){
            this.filters.page=val
            this.fillUrl(this.filter)
        },
        changePageSize(val){
            this.filters.pageSize=val
            this.fillUrl(this.filter)
        },
        getTableDate(val){
            //  请求数据略
        }
    },
    beforeRouteEnter(to,from,next) {
        next(vm =>{
            vm.getTableDate(vm)
        })
    },
    beforeRouteUpdate(to, from, next) {
		this.getRouteData(this)
		next()
	}
}

• minxn 代码

var mixin = {
	methods: {
		fillUrl(...val) {
			const query = Object.assign({}, ...val)
			this.cleanupQueryObject(query)
			this.$router.push({
				name: this.currentRouteName,
				query: query
			})
		},
		// url中的string转为number
		objectPropertiesInt(obj, properties) {
			this.$lodash.forOwn(obj, (v, k) => {
				if (this.$lodash.indexOf(properties, k) > -1) {
					if (v !== '' && v !== undefined) {
						obj[k] = parseInt(v, 10)
					}
				}
			})
			return obj;
		},
		// 清除空字段
		cleanupQueryObject(val) {
			this.$lodash.forOwn(val, (v, k) => {
				if (v === '' || k === undefined || k == []) {
					delete val[k]
				}
			})
		}
	}
}

export default mixin;