Javascript 摆脱#！在安圭拉的路线上

我正在使用Angularjs ngRoute for SPA，Node.js作为我的后端，我的网站上有3个页面，上面写着：

• localhost:8000/#/

• localhost:8000/#/红色

• localhost:8000/#/绿色

通过谷歌搜索，我找到了摆脱

/**#的方法**/

并且只有当用户无意按F5重新加载页面时，它才能正常工作。如果重新加载，我的页面结构会变得更糟。我的意思是，如果用户在

red.html

页面中按F5，那么

red.html

单独显示，而不是在ng视图中注入

red.html

内容，这就是nodejs get请求的性质。有没有办法摆脱这个问题

index.html

var-app=angular.module（“myApp”[“ngRoute”]）；
app.config（函数（$routeProvider，$locationProvider）{
$routeProvider
.当（“/”时{
templateUrl:“/main”
})
.when（“/red”{
templateUrl:“/red”
})
.when（“/绿色”{
模板URL:“/green”
})
$locationProvider.html5Mode（true）；
});

问题是，如果您使用html5模式并点击F5，您的服务器应该提供的不是red.html，而是index.html。这是因为angular必须引导并解析url以获得正确的位置

编辑：规则包括：

如果您呼叫（或F5或直接导航）

http://localhost:8000

，则必须从服务器获取index.html

如果您呼叫（或F5或直接导航）

http://localhost:8000/red

，则您也必须从服务器获取index.html

奖金：

---

您应该从定义的位置交付静态内容（图像、css、html模板），如

http://localhost:8000/static/

或从另一个域获得指向静态文件和url路径的无歧义路径

您正在使用

node.js

和

express

，对吗？这样，只需将所有应用程序视图路由链接到

index.html

，并将部分视图放在其他子目录中，以避免路由冲突：

//resources 
app.use("/js", express.static(__dirname + "/js"));
app.use("/img", express.static(__dirname + "/img"));
app.use("/css", express.static(__dirname + "/css"));

//different path for your partials to avoid route conflicts
app.use("/partials", express.static(__dirname + "/partials"));

//view routes
app.get('/*', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

这样，您的所有路线：

• localhost:8000/

• localhost:8000/红色

• localhost:8000/绿色

将指向您的

index.html

。因此，您的

$routeProvider

将能够以正确的方式插入视图，而您的

index.html

每次都将被加载

最后，您的路由配置应如下所示：

---

在哪里注入HTML内容

red.html

应该加载到

ng视图中

问题出在哪里？缺少什么？如果重新加载的red.html没有插入到ng视图中。相反，如果重新加载此URL

localhost:8000/red

您配置的路由

。当（“/red”）时，它将单独显示（仅显示red.htm，不带html标记、head标记等），…

应该加载。URL中不应该有类似

.html

的后缀。有什么问题吗？这不是你问题的答案，但我不使用ngRoute。使用ui路由器（）相反，当您使用

HTML5模式

时，必须将服务器配置为对虚拟目录进行说明。不要使用与页面路径相同的模板路径，否则服务器上无法区分客户端路由模板使用相同路径时无法工作though@charlietfl哦，是的，让我纠正一下。嗨，林，很明显，如果我输入loc会发生什么alhost:3000/partials/red.html在chrome的URL中，点击回车键…我的答案是red.html将单独显示为一个页面，而不是将red.html的内容注入ng-view@annapoorani是的，但这可能会发生在你所有的公共资源上。这是正常情况，没有什么异常。即使你您只允许通过AJAX请求加载。您的应用程序路由不会直接指向您的资源，这样用户就不会以

/partials/red.html

结束。您期望什么？不仅是公共资源。对于重载和F5情况也是我的确切问题。如果您直接调用expr，我不能承认您的规则2ess将发送red（静态文件）index将如何发送get请求SEE lin的答案。

//resources 
app.use("/js", express.static(__dirname + "/js"));
app.use("/img", express.static(__dirname + "/img"));
app.use("/css", express.static(__dirname + "/css"));

//different path for your partials to avoid route conflicts
app.use("/partials", express.static(__dirname + "/partials"));

//view routes
app.get('/*', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "/partials/main.html"
    })
    .when("/red", {
      templateUrl: "/partials/red.html"
    })
    .when("/green", {
      templateUrl: "/partials/green.html"
    })

  $locationProvider.html5Mode(true);
});