从角度 $locationProvider 中的 url 中删除 # 后的问题答案

【问题标题】：Issue after removing # from url in angular $locationProvider从角度 $locationProvider 中的 url 中删除 # 后的问题
【发布时间】：2017-08-12 02:23:12
【问题描述】：

在我的 app.js 中有

 $routeProvider
  .when('/', {
    templateUrl: '/views/main.html'
  })
  .when('/admin', {
    templateUrl: 'views/admin.html',
    controller: 'admin',
  })

所以我的路线是 localhost:3000/#/ 并且单击按钮将我带到 localhost:3000/#/admin 我想从我的网址中删除 # 所以我使用了

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

现在localhost:3000/ 正在工作，点击按钮将我带到localhost:3000/admin。

但是如果我在 url 中直接给localhost:3000/admin，它会给出Cannot Get /admin..但是如果给localhost:3000/#/admin，它会把我带到localhost:3000/admin。为什么这种行为我怎么能让localhost:3000/admin工作。有人可以帮忙吗

【问题讨论】：

标签： javascript angularjs node.js meteor

【解决方案1】：

您需要使所有这些路由返回相同的 HTML 和其他资产，以便对给定 URL 的第一个请求返回正确的 HTML。

使用“#”就容易多了，因为从“#”到 URL 末尾的所有内容都不会在请求中发送到服务器，因此服务器不需要做任何事情。

但是对于没有“#”的 url，整个 URL 被发送到服务器，因此服务器必须知道要提供什么服务，并且客户端必须能够根据第一次使用的 URL 加载正确的视图页面加载。

没有提供后端代码，很难说出具体的内容，但您必须确保：

对于像http://localhost:3000/admin 这样的每个请求，都返回与http://localhost:3000/ 相同的HTML
您在 HTML 中只为 CSS 和客户端 JavaScript 使用绝对 URL
您的客户端代码在第一次加载时显示正确的视图
您的客户端会更改每次 URL 更改的视图，就像使用“#”所做的那样

【讨论】：

感谢您的解释。我理解了部分，但完全不知道如何实现这一点。
我不知何故试图在这里添加我的代码...你能看看jsfiddle.net/uxj8h3hb/1
我不能为所有路线使用相同的 hml。它们应该不同
@kaxi1993 。这是我所指的例子..你可以尝试在你的本地运行..这是一个非常小的应用程序..你可以理解我在问什么..@987654322 @
@rsp 这是我所指的例子。这是一个非常小的应用程序..你可以准确地理解我在问什么..github.com/Anomen/AuthenticationAngularJS –

【解决方案2】：

移动这一行

app.use(express.static(path.join(__dirname, 'public')));

app.js 文件中app.use(app.router); 之前
在javascripts/app.js中添加这一行

$locationProvider.html5Mode({ enabled: true, requireBase: false });
添加此代码

app.get('*', function(req, res) { res.render('index', { title: 'Express' }); });

在app.js 之前http.createServer(app) 行

【讨论】：

@user7350714 我改了答案
哦，伙计！！！很好，它正在工作..这里有什么错误..你能详细说明一下。这样每个人都可以得到它
我在上面提到了这些问题，静态导入应该在应用程序使用路由器之前进行，否则您将无法加载，要删除主题标签，您需要激活 html5mode 和最后一个，当页面刷新时它会从后端加载文件，所以您需要为每个请求发送此文件

【解决方案3】：

请更新您的html如下：

在head部分，请使用'base'标签。所以 head 标签看起来像这样：

<html>
  <head>
    <base href="/">
  </head>
</html>

然后尝试使用 URL 'localhost:3000/admin' 让我知道这是否有帮助。

【讨论】：