如何使用 othwerwise 函数传递查询参数答案

【问题标题】：how to pass the query parameter with the othwerwise function如何使用 othwerwise 函数传递查询参数
【发布时间】：2015-07-08 22:41:06
【问题描述】：

鉴于以下 javascript：

$stateProvider
  .state('search', {
    url: '/search?query',
})   
;

$urlRouterProvider.otherwise("search");

当我访问页面时

base_url?query=x

我被重定向到

base_url/搜索

但查询参数会丢失。

有没有办法用 else 函数传递查询参数？

【问题讨论】：

标签： javascript angularjs angular-ui-router angular-ui

【解决方案1】：

有a working plunker

UI-Router 在这里有原生解决方案。

otherwise 不一定是“url”字符串，它可以是一个函数。

在此问答中查看实际情况：

How not to change url when show 404 error page with ui-router

代码可能是这样的：

$urlRouterProvider.otherwise(function($injector, $location){
    var state = $injector.get('$state');
    state.go("search", $location.search()); // here we get { query: ... }
    return $location.path();
});

$location.search() 将为我们提供 params 对象，可能类似于：{ query: ... }。我们接受它并使用此参数重定向到状态搜索...

查看here

【讨论】：

启用了 html5mode 对我不起作用。同样在 plunkr 中，它被注释掉了。能否请您举一个启用 html5 的示例？我被重定向了两次。我打印了 console.log($location,$location.path(), $location.search());。我第一次得到“/”对象{vid：“Auto1”}，然后是“/”对象{}
我不是 html 5 模式的粉丝或用户， 但这里是调整后的版本：plnkr.co/edit/yrfOXMeaCJEKt08ihw00?p=preview。简而言之：不要忘记包含正确的“绝对”网址......因为我们并不生活在安全地带，在哈希 # 之后进行安全路由......
我觉得不用写return $location.path();。这会触发额外的状态重定向，而我们已经使用 state.go 函数发出了状态重定向。
我在这个 fork plnkr.co/edit/uLFCZHkiUOHk4STvTux6?p=preview 上附加了一些控制台日志，以表明我的 plunker 应该运行良好。最重要的是，正如 [doc 所说的 g(stackoverflow.com/a/25591908/1679310): 否则必须是：您要重定向到的 url 路径或返回 url 路径的函数规则。 所以我们必须（shuold）返回那个...希望它有点帮助...

【解决方案2】：

您根本不需要获取注射器和 $state.go。 otherwise 方法的参数可以是 URL 路径，它可以在其中包含参数。

因此，在您的特定情况下，以下代码可以引导您到 base_url/search?query=x

$urlRouterProvider.otherwise("/search?query=x");

或者，参数可以是返回 URL 路径的函数。如果你不确定它可能有哪些 URL 参数，你只需要从 $location 获取参数，然后格式化为类似 URL 的字符串并返回它。

$urlRouterProvider.otherwise(function($injector, $location) {
    var params = $location.search()

    // format params to 'p1=v1&p2=v2' style
    var formatted = Object.keys(params).map(function(key) {
        return key + '=' + params[key]
    }).join('&')

    return '/search?' + formatted
});

【讨论】：