我正在学习AngularJS，有一件事真的让我很恼火。
我使用$routeProvider为我的应用程序声明路由规则:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
但是当我在浏览器中导航到我的应用程序时，我看到app/#/test而不是app/test。
所以我的问题是为什么AngularJS把这个散列#添加到url ?有可能避免吗?
当前回答
如果你像其他人说的那样启用了html5mode，并创建一个包含以下内容的.htaccess文件(根据你的需要进行调整):
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
当用户进入正确的路线时，他们将被引导到你的应用程序，你的应用程序将读取路线，并将他们带到正确的“页面”。
编辑:只要确保没有任何文件或目录名称与您的路由冲突。
其他回答
你也可以使用下面的代码重定向到主页(主页):
{ path: '', redirectTo: 'home', pathMatch: 'full'}
在如上所述指定重定向后，您可以重定向其他页面，例如:
{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
使用HTML5模式需要在服务器端重写URL，基本上你必须重写应用程序入口点的所有链接(例如index.html)。在这种情况下，要求<base>标记也很重要，因为它允许AngularJS区分url中作为应用程序基的部分和应该由应用程序处理的路径。有关更多信息，请参见AngularJS开发者指南-使用HTML5模式的$location服务器端。
更新
如何:配置您的服务器与html5Mode1工作
当你启用html5Mode时，#字符将不再在你的url中使用。符号#很有用，因为它不需要服务器端配置。如果没有#，url看起来会更好，但也需要服务器端重写。下面是一些例子:
Apache重写
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Nginx Rewrites
server {
server_name my-app;
index index.html;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Azure IIS重写
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
表达重写
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
app.listen(3006); //the port you want to use
另请参阅
HTML5模式与Hash模式AngularJS的优缺点 如何关闭hashbang模式
try
$locationProvider.html5Mode(true)
更多资料请浏览 locationProvider美元 使用美元的位置
在Angular 6中，你可以使用路由器:
RouterModule.forRoot(routes, { useHash: false })
让我们写下看起来简单而简短的答案
在路由器中添加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-详细介绍了上面的答案
