[英]Angular ui-router adding hash to url
我正在为角度和角度ui路由器的应用程序设置脚手架。 我有它的工作,但似乎是在我的网址中添加一个哈希(我在localhost上运行dev) localhost:9000 /#/ test 。 当我登陆主页面时,它只是localhost:9000 ,它仍然提供主视图内容。 如果可能的话我想摆脱哈希。
所以这是我的设置:
在我的身体中的index.html中,我只有导航,然后是ui-view:
<div class="row">
<ul class="nav navbar-nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="test">Test</a></li>
</ul>
</div>
<div ui-view=""></div>
在我的app.js我只有:
angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
});
因此,当我降落时,它很好,但是当我开始使用我设置的导航时,它会将散列添加到网址中,如果可能的话,不希望使用它们。 谢谢!
包含$locationProvider
并执行$locationProvider.html5Mode(true);
:
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
我也有一个otherwise
在那里,所以如果它找不到指定的路线,它将只是默认返回:
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
将$ locationProvider注入您的配置并将html5mode设置为true:
angular.module('playApp', [
'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
确保调整.htaccess来处理此问题(重写回root)。
有一个替代html5Mode
。 但它有它的缺点。
定义ui-router状态时, 不需要url
选项 。 从该文件:
如果为这些子状态添加书签没有意义,则可以创建一些没有URL的子状态。 状态机像往常一样在无URL状态之间转换,但在完成时不更新URL。 您仍然可以获得状态转换的所有其他好处,例如参数,解析和生命周期钩子。
如果您不需要为状态提供URL以便用户可以为这些状态添加书签,则可以省略url
选项。 网址不会更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.