如果不给 # 在 url 我会得到一个 404 错误 [重复]答案

【问题标题】：Without giving # in url I'll get a 404 error [duplicate]如果不给 # 在 url 我会得到一个 404 错误 [重复]
【发布时间】：2015-07-11 05:52:01
【问题描述】：

是否可以通过直接从 url 提供 id 来不从 url 提供 # 符号来显示记录？我正在开发一个网站，其中只有一个查看页面为Login.html。我需要通过将 url 中的用户 id 作为abc.in/1 来访问它，这里 1 是用户的 id。我将 Login.html 设置为默认页面，当我尝试通过提供 abc.in/1 来访问它时，即url中的id不能显示记录。但是当我给abc.in#/1 时，它会正确显示记录。我不想通过在 url 中提供 # 来访问它。我的代码如下-

    <html ng-app="myApp" style="height: 500px; overflow: auto;">
    <head>
        <meta charset="utf-8">

        <base href="/">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title style="color: white;">c60</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <script src="../app/js/controllers/LoginController.js"></script>

    </head>

    <body>
    ---record details
    </body>
</html>

在 app.js-

    angular.module('myApp', [
      'ngRoute', 'ngResource', 'ngCookies',
      'myApp.filters',
      'myApp.services',
      'myApp.directives',
      'myApp.controllers',
      'ui.bootstrap', 'ngAnimate', 'ngDragDrop'  //'ngSanitize',
    ]).
    config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {

           $routeProvider.when('/:id',
          {
              templateUrl: '/Login.html',
              controller: 'LoginController'
          });

        $routeProvider.otherwise({ redirectTo: '' });

        //check browser support
        if (window.history && window.history.pushState) {

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });                    
        }
    }])

如何做到这一点？我只是不想在 url 中给出 # 来显示 url 中提供的特定 id 的记录。我需要一个干净的 url。如何做到这一点？

我尝试使用以下问题Removing the # symbol from angular.js urls 中的提示从我的 ulrs 中删除 # 。现在，问题是如果我尝试直接访问它们，我的 url 将不起作用。从相关问题中的给定示例中，如果将下面的 url 直接放在浏览器 http://localhost/phones 中；就我而言，它是abc.in/1

我会收到 404 错误。知道如何解决这个问题吗？

【问题讨论】：

stackoverflow.com/questions/14771091/…

标签： angularjs html url url-routing angularjs-routing

【解决方案1】：

可以在 Angular 应用程序的 url 中隐藏 #。为此，您需要配置已在应用配置中注入的 $locationProvider。在 $routeProvider 配置后添加以下内容

$locationProvider.html5Mode(true);

最后将以下内容添加到您的 html 文件的 head 部分

<base href="/">

这里有几件事似乎是错误的。首先，即使您的应用程序中只有一个视图，最好有一个 index.html 之类的东西来托管您的 ng-view 指令。然后，当您导航到应用程序的一个视图时，该视图将加载到您拥有 ng-view 指令的位置。其次，从您的 app.js 中，您有如下所示的内容

$routeProvider.when('/:id',
      {
          templateUrl: '/Login.html',
          controller: 'LoginController'
      });

    $routeProvider.otherwise({ redirectTo: '' });

因此，这清楚地表明，当您在浏览器的地址栏中输入“/”或“/1”时，您的应用程序将按照 templateUrl 中的说明获取 login.html。但是，在您的测试中，您在浏览器的 url 地址栏中输入 abc.in/1 （我不知道它来自哪里）。在路由提供者的路由中检查此 url 时，将找不到匹配项。因此，您会收到 404 错误。更糟糕的是，您的 $routeProvider.otherwise 正在重定向到空字符串。正确的做法是为您的应用程序使用各自的 templateUrl 声明各种路由，并设置其他方式以重定向到您的应用程序的根目录，如果您现在添加它，则在您的情况下仍然是 login.html 或 index.html，因为您只有一种观点。希望这会有所帮助。

【讨论】：

我编辑了我的问题。我在 Logi.html 页面中的 head 标记之后给出了<base href="/">，并且我已经在 app.js 中注入了$locationProvider.html5Mode(true); ..但它仍然给出了HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. The directory or file specified does not exist on the Web server. The URL contains a typographical error. A custom filter or module, such as URLScan, restricts access to the file. 的错误。当我输入abc.in/1（即记录的ID）时，它会出现此错误。
此解决方案只能将 url 中的 # 替换为 / 。我不想在网址中提供#。我想要纯 url 作为abc.in/1。根据您的解决方案，当我提供abc.in#1 时，它会将此网址转换为abc.in/1 并显示记录结果。但我想要的只是网址中没有#。我只需要提供abc.in/1 并使用此网址显示记录。
您能发布您最新的 app.js 供我们审核吗？
我更新了问题。但问题仍然存在。此解决方案只能将 # from url 替换为 / 。我不想最初在 url 中给出 # 。我想要纯 url 作为 abc.in/1。根据您的解决方案，当我给出 abc.in#1 时，它会将此网址转换为 abc.in/1 并显示记录结果。但我不想用 / 来“替换”# 但我想在 url 中给出 /
@SayliVaidya 你能在不“替换”# 的情况下解决这个问题吗？