gpt4 book ai didi

javascript - 如果将基本 href 设置为 '/' 以外的 AngularJS 漂亮 url 无法刷新页面

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:01:05 28 4
gpt4 key购买 nike

我是 AngularJS 的新手。我目前在为我的观点编写漂亮的 url 时遇到问题。我已经设置了 $locationProvider.html5Mode(true);删除 #从地址栏中显示的网址。但是,这样做后我无法重新路由到所需的 View 。我不断收到错误 Cannot GET /login

我得到主页/login当应用程序第一次启动时,但当我刷新页面时,我得到了同样的错误。

这里是应用程序的主页面(index.html)

<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
<!-- endbuild -->
</head>
<body ng-app="F1FeederApp" class="col-md-8">

<ng-view></ng-view>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/loginHttpBackend.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/driver.js"></script>
<script src="scripts/controllers/drivers.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->

我的 app.js 文件(重新路由发生的地方)看起来像这样

angular.module('F1FeederApp.controllers', []);

angular.module('F1FeederApp',
[ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ])
.config([ '$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$location) {
console.log('---------------inside config----------------');
console.log($routeProvider);
$routeProvider.when("/login", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/login"
});
$locationProvider.html5Mode(true);

} ]);

我还做了以下重要观察

  1. 如果我将 index.html 上的基本 href 设置为指向根目录,如 <base href='/'>

并重新路由为

$routeProvider.when("/", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/"
});

我的应用在这里运行良好。但我希望“/login”成为我的默认页面。请指导我哪里出错了,或者这是 AngularJS 本身的问题。

最佳答案

除了启用 html5Mode 之外,您还需要更新服务器端以重定向所有请求,例如 /login/home等到单个入口点,如 index.html

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

在此文档页面上搜索“服务器端”:

angular $location docs

关于javascript - 如果将基本 href 设置为 '/' 以外的 AngularJS 漂亮 url 无法刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24730654/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com