Angular JS UI 路由导航

Question

我正在尝试使用 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>

Answer 1

您可以在 AngularJS 中对 url 进行编码，并通过在应用程序的配置块中添加此简单行来启用 html5mode 模式来避免整个应用程序的哈希爆炸.js

$locationProvider.html5Mode(true);

参考链接：AngularJS：如何使用深度链接启用$locationProvider.html5Mode

Answer 2

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

最显着的变化之一是：

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

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

如果您实际上想要没有哈希前缀，那么您可以通过向应用程序添加配置块来恢复以前的行为：

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

详