Angular JS UI-路由导航答案

【问题标题】：Angular JS UI-Route NavigationAngular JS UI-路由导航
【发布时间】：2017-12-08 10:08:03
【问题描述】：

我正在尝试使用 Angular 中的 UI-Route 进行简单的路由，但是当我在浏览器中输入带有 # 的 url 时，就像这样 http://localhost:8080/#/stateone 它会添加一些奇怪的符号，比如 http://localhost:8080/#!#%2Fstateone。谁能解释一下这是怎么回事？

这是我在 app.js 文件中的代码：

angular
    .module('myApp', ["ngMaterial", "ui.router"])
    .config(function($mdThemingProvider, $stateProvider) {
    $mdThemingProvider.theme('default')
    .primaryPalette('teal')
    .accentPalette('orange');

    $stateProvider
        .state('stateone' , {
        url: '/stateone',
        template: '<h1>State One</h1>'
    })

    .state('statetwo', {
        url: '/statetwo',
        template: '<h1>State Two</h1>'
    });
});

模板的文件代码：

<ui-view></ui-view>

【问题讨论】：

你的 hash-bang 是 #!，所以通过引入 #/stateone 它使它成为 #!#/stateone，它被 URL 编码成 #!#%2Fstateone

标签： angularjs

【解决方案1】：

您可以在 AngularJS 中对您的 url 进行编码，并通过在 app.js 的配置块中添加这个简单的行来启用 html5mode 模式，从而避免整个应用程序中的 hash-bang

$locationProvider.html5Mode(true);

参考链接：AngularJS: how to enable $locationProvider.html5Mode with deeplinking

【讨论】：

【解决方案2】：

从 1.5 版迁移到 1.6 版时可能会出现此问题...

最显着的变化之一是：

将默认的 $location 哈希前缀更改为 '!'，因为之前的空字符串默认值非常规且令人困惑。

用于 $location hash-bang URL 的默认哈希前缀已更改从空字符串 ('') 到 bang ('!')。如果您的应用程序不使用 HTML5 模式或在不支持的浏览器上运行 HTML5 模式，然后您还没有指定自己的哈希前缀客户端 URL 现在将包含一个 !字首。例如，而不是 mydomain.com/#/a/b/c URL 将变为 mydomain.com/#!/a/b/c。

如果你真的不想有哈希前缀，那么你可以通过向你的应用程序添加一个配置块来恢复以前的行为：

appModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

Details

【讨论】：