不带哈希“#”的 AngularJS 路由

javascript angularjs

2022-08-30 00:56:13

我正在学习AngularJS，有一件事真的让我烦恼。

我用于为我的应用程序声明路由规则：$routeProvider

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

但是当我在浏览器中导航到我的应用程序时，我看到而不是.app/#/testapp/test

所以我的问题是为什么AngularJS将此哈希添加到url中？有没有可能避免它？#

答案 1

事实上，您需要非HTML5浏览器的#（主题标签）。

否则，他们将只在提到的href上对服务器进行HTTP调用。#是一个旧的浏览器短电路，它不触发请求，它允许许多js框架在此基础上构建自己的客户端重新路由。

您可以使用告诉angular使用HTML5策略（如果可用）。$locationProvider.html5Mode(true)

以下是支持HTML5策略的浏览器列表：http://caniuse.com/#feat=history

答案 2

如果您像其他人所说的那样启用了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]

当用户输入正确的路由时，系统将定向到你的应用，你的应用将读取该路由并将他们带到其中的正确“页面”。

编辑：只需确保没有任何文件或目录名称与您的路由冲突。