Question

我使用的是模块化路由，我想从我的网址中删除＃标记。但正如大多数文章所说，我将此代码添加到我的路线中

.config(function ($routeProvider, $locationProvider) {
$routeProvider
  .otherwise({
    redirectTo: '/'
  });

  // use the HTML5 History API
  $locationProvider.html5Mode(true);

})

我将其添加到我的母版页（index.html）

<head>
 <meta charset="utf-8">
 <title></title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width">
 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 <!-- build:css(.) styles/vendor.css -->
 <!-- bower:css -->
 <link rel="stylesheet"         href="bower_components/bootstrap/dist/css/bootstrap.css" />
 <!-- endbower -->
 <!-- endbuild -->
 <!-- build:css(.tmp) styles/main.css -->
 <link rel="stylesheet" href="styles/main.css">
 <!-- endbuild -->
 <base href="/">
</head>

我也添加了基本标签。但问题是我输入这样的网址

https://localhost:9000/loginselect

它说

Cannot GET /loginselect

但是，如果我按照以下（作为previus）输入它的工作

https://localhost:9000/#/loginselect

但它将Url显示为

https://localhost:9000/loginselect

但是当我再次刷新时会发生同样的错误。任何人都可以帮助我。我使用requireJs来加载文件，模块化的路由文件正在使用requireJs

加载

Answer 1

您需要将服务器配置为在该路径上提供index.html。

html5Mode仅在非碎片网址时设置Angulars行为，但Angular仅在第一个请求之后处理事情，因为在第一个请求时页面和javascript尚未加载。第一个请求总是命中服务器，因此当您直接输入URL https://localhost:9000/loginselect时，请求将被发送到服务器，如果服务器没有识别该URL，您将收到错误。

要解决此问题，您需要将服务器配置为为该网址提供index.html文件以及您的应用使用的任何其他网址。通常，您将服务器设置为在任何URL上发送index.html，但匹配静态资产（如图像）的除外。如果你这样做，那么在这些网址上服务器将加载index.html，Angular将启动，Angular将处理该路由。

它适用于https://localhost:9000/#/loginselect的原因是，按惯例，服务器将忽略网址的片段部分，即＆＃39;＃/ loginselect`。所以服务器抓住了什么/（因为它忽略了其余的），这可能是index.html。 Angular然后开始并处理片段部分。

修改

要在nginx中执行此操作，我会使用以下内容：

location / { index index.html; try_files $uri $uri/ /index.html =404; }

这将检查给定路径上是否有文件（因此，如果您要求提供静态资源，例如图像，它将为您提供该文件），如果找不到它，则会为index.html提供服务。

请注意，这是最简单的情况，并且它具有在任何404上提供index.html的缺点。您还可以更具体并排除某些目录（例如/ assets或/ static），而不是执行try_files。如果你试图获得一个不存在的静态资产，你仍然可以拥有404。

Answer 2

如果您在服务器上运行Apache，可以将其放在.htaccess文件中，这样您就可以直接转到任何有效的URL。但是说真的，我现在已经在专业的环境中与Angular合作了一年多了：没有人关心网址中的#。离开那里比试图删除它更容易。

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(cssÂ¦js|html|png) #Add extra extensions needed.
    RewriteRule (.*) index.html [L]
</ifModule>

locationProvider html5mode无效

2 个答案: