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;

複製代碼