摆脱#！在ngRoute中
我正在使用Angularjs ngRoute作为SPA的后端，我在我的网站上有三个页面：
localhost:8000/#!/localhost:8000/#!/redlocalhost:8000/#!/green
通过谷歌搜索，我找到了摆脱/**#!**/的方法，只有当用户无意按F5来重新加载页面时，它才能正常工作。如果重新加载，我的页面的结构会变得更糟。我的意思是，如果用户在red.html页面中按下red.html，那么red.html就会单独显示，而不是在ng-View中注入red.html内容--这就是nodejs请求的本质。有什么办法摆脱这个问题吗？
index.html
<body ng-app="myApp">
<p><a href="/">Main</a></p>
<a href="/red">Red</a>
<a href="/green">Green</a>
<ng-view></ng-view>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/main"
})
.when("/red", {
templateUrl: "/red"
})
.when("/green", {
templateUrl: "/green"
})
$locationProvider.html5Mode(true);
});
</script>
</body>回答 2
Stack Overflow用户
发布于 2017-06-18 11:11:15
你用的是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/redlocalhost:8000/green
将指向您的index.html。因此，您的$routeProvider将能够以正确的方式注入视图，而您的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);
});Stack Overflow用户
发布于 2017-06-18 11:09:25
问题是，如果您使用html5 5模式并点击F5，您的服务器应该服务的不是red.html，而是index.html。这是因为角必须被引导并解析你的url才能得到正确的位置。
编辑:规则如下：
- 如果您调用(或F5或直接导航)
http://localhost:8000，则必须从服务器获取index.html。 - 如果您调用(或F5或直接导航)
http://localhost:8000/red，那么您也必须从服务器获得index.html。
奖励：
您应该将静态内容(图像、css、html模板)从定义的位置(如http://localhost:8000/static/ )或从另一个域交付，以获得指向静态文件和url路径的明确路径。
https://stackoverflow.com/questions/44614101
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号