如何在 url 中记录页面搜索条件

Question

问题描述在一个页面，有很多搜索选项，比如十几个。假设全部都有选中，那么查询参数就会有十几个。我想把这些参数都放到 url 上，这样即使页面刷新也能还原之前的搜索条件。我用的是 angular(1.2.5) + ui-router(0.2.18) 来做的，目前的代码是这样的贴代码结果是无法进入 main.enter.paper ，原因就是设置了很多 stateParams ，但是没有给默认值, 因为那些都是可选参数。我的期望是最好设置路由的时候只需要这样设置还有之所以不用 location.href 是因为这个会刷新页面，不知各位有什么好办法?

Answer 1

ok, 我找到一个可以实现的方法，贴代码如下：

$stateProvider

        .state('main', {

            url: '/',

            templateUrl: 'main.html',

            controller: 'MainCtrl',

            controllerAs: 'mn'

        })

        .state('main.enter', {

            url: '^/enter',

            template: '<div ui-view class="enter"></div>'

        })

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

            url: '^/enter/paper/:page?sort=1&per_page&publisher_id&school_stage_id&subject_id&volume_id&grade_id&type_id&level&year&province_id&area_id&city_id&time_start&time_end',

            templateUrl: 'enter_paper.html',

            controller: 'EnterPaperCtrl',

            controllerAs: 'ep'

        });

就是在定义 url 的时候，后面先定义可选参数，'^/enter/paper/:page?sort=1&per_page&publisher_id，

这样，在进入 'main.enter.paper' 后，地址栏可以看到 url 是 /enter/paper/1?sort=1&per_page=10，

因为我进入 EnterPaperCtrl 就更新了一次 url，更新参数就是 {page: 1, sort: 1, per_page: 10}，然后如果选中出版社，查询后更新 url，

var params = {

    page: 1,

    sort: 1,

    per_page: 10,

    publish_id: '38dfjdfkj889'

};

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

可以看到 url 将更新为 /enter/paper/1?sort=1&per_page=10&publish_id=38dfjdfkj889