我正在学习AngularJS，有一件事真的让我很恼火。
我使用$routeProvider为我的应用程序声明路由规则:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
但是当我在浏览器中导航到我的应用程序时，我看到app/#/test而不是app/test。
所以我的问题是为什么AngularJS把这个散列#添加到url ?有可能避免吗?
当前回答
让我们写下看起来简单而简短的答案
在路由器中添加html5Mode(true);
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
在html头部添加基本标签
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
感谢@plus-详细介绍了上面的答案
其他回答
让我们写下看起来简单而简短的答案
在路由器中添加html5Mode(true);
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
在html头部添加基本标签
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
感谢@plus-详细介绍了上面的答案
你也可以使用下面的代码重定向到主页(主页):
{ path: '', redirectTo: 'home', pathMatch: 'full'}
在如上所述指定重定向后，您可以重定向其他页面，例如:
{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
在Angular 6中，你可以使用路由器:
RouterModule.forRoot(routes, { useHash: false })
try
$locationProvider.html5Mode(true)
更多资料请浏览 locationProvider美元 使用美元的位置
事实上，非HTML5浏览器需要#(标签)。
否则，它们只会在提到的href处对服务器进行HTTP调用。 #是一个旧的浏览器短路，它不触发请求，这允许许多js框架在此基础上构建自己的客户端重路由。
你可以使用$locationProvider.html5Mode(true)告诉angular在可用的情况下使用HTML5策略。
以下是支持HTML5策略的浏览器列表:http://caniuse.com/#feat=history
