导航路径不以 <base> 路径开头时的 Angular 404 页面

Question

似乎无法解决这个 Angular 和 UI-Router 问题。我正在尝试为我的 Angular 应用程序设置一个自定义 404 页面，但在极端情况下，Angular 会抛出错误而不是处理路由。

我的网址是：http://www.example.com/

我要求应用程序应该有一个基本路径，所以我使用 .NET URL Rewrite 将所有流量重定向到正确的位置：

http://www.example.com/app/

为了完成这项工作，我在我的 HTML 头部部分中使用了 <base> 标记，如下所示：

<base href="/app/">

现在我所有的状态都使用 /app/ 前缀。

$stateProvider
// https://www.example.com/app/
.state('/', {
    url: '/',
    templateUrl: '/Partials/Pages/Home',
  })


  // https://www.example.com/app/login
  .state('login', {
    url: '/login',
    templateUrl: '/Partials/Pages/Login',
  });

为了让我的 404 页面正常工作，我定义了我的最后一个状态来拦截任何无法识别的路径：

// If no state is matched, load the 404 error
$stateProvider.state('404', {
    url: '*path',
    templateUrl: '/Partials/Pages/PageNotFound',
  });

这几乎可以完美运行。以下 URL 返回我的 404 错误： https://www.example.com/app/sdfsf

但是，任何不以我配置的基本路径开头的路径都不会重定向到 404 错误。以下路径返回 Angular 错误： https://www.example.com/login

对于不以我的基本路径开头的任何 URL，有没有办法处理 404 错误？

Answer 1

首先，您的这部分代码存在矛盾：

// For any unmatched url, redirect to home
$urlRouterProvider.otherwise('/');

// If no state is matched, load the 404 error
$stateProvider.state('404', {
    url: '*path',
    templateUrl: '/Partials/Pages/PageNotFound',
  });

你应该做的是与其他人一起定义你的“404”状态，否则应该重定向到它：

$stateProvider
// https://www.example.com/app/
.state('/', {
    url: '/',
    templateUrl: '/Partials/Pages/Home',
  })


.state('404', {
    url: '/404',
    templateUrl: '/Partials/404.html',
  });
$urlRouterProvider.otherwise('/');