html条件查询的页面,如何在 url 中记录页面搜索条件

问题描述

在一个页面，有很多搜索选项，比如十几个。假设全部都有选中，那么查询参数就会有十几个。我想把这些参数都放到 url 上，这样即使页面刷新也能还原之前的搜索条件。

我用的是 angular(1.2.5) + ui-router(0.2.18) 来做的，目前的代码是这样的

贴代码

// config

angular.module('app').config(configRouter);

function configRouter($locationProvider, $urlRouterProvider, $stateProvider) {

$locationProvider.html5Mode(false);

$urlRouterProvider

.when('/', '/enter/paper/1/1/')

.when('/enter', '/enter/paper/1/1/')

.otherwise('/enter/paper/1/1/');

$stateProvider

.state('main', {

url: '/',

templateUrl: 'main.html',

controller: 'MainCtrl',

controllerAs: 'mn'

})

.state('main.enter', {

url: '^/enter',

template: '

})

.state('main.enter.paper', {

url: '^/enter/paper/:page/:sort/:audit_status/:audit_time_start/:audit_time_end/:id/:name/:publisher_id/:school_stage_id/:subject_id/:grade_id/:volume_id/:chapter_id',

templateUrl: 'enter_paper.html',

controller: 'EnterPaperCtrl',

controllerAs: 'ep'

});

}

// EnterPaperCtrl

var params = {

page: 1,

sort: 1,

audit_status: 8,

// ... 省略其他参数

};

function search() {

return EnterService.search(params).then(function(data) {

// 省略其他代码

// 使用 $state.go 可以实现修改 query 而不用刷新页面

$state.go('.', params, {notify: false});

});

}

结果是

无法进入 main.enter.paper ，原因就是设置了很多 stateParams ，但是没有给默认值, 因为那些都是可选参数。

我的期望是

最好设置路由的时候只需要这样设置

// config

$urlRouterProvider

.when('/', '/enter/paper/1/1')

.when('/enter', '/enter/paper/1/1')

.otherwise('/enter/paper/1/1');

$stateProvider

.state('main.enter.paper', {

url: '^/enter/paper/:page/:sort', // 最好是其他可选参数不用预先写在这里

templateUrl: 'enter_paper.html',

controller: 'EnterPaperCtrl',

controllerAs: 'ep'

});

// EnterPaperCtrl

var params = {

page: 1,

sort: 1,

audit_status: 8,

// ... 省略其他参数

};

function search() {

return EnterService.search(params).then(function(data) {

// 省略其他代码

// 使用 $state.go 可以实现修改 query 而不用刷新页面

$state.go('.', params, {notify: false});

});

}

还有之所以不用 location.href 是因为这个会刷新页面，不知各位有什么好办法?