AngularJS ui 路由哈希前缀

Question

我正在使用 AngularJS ui 路由进行路由，我想删除 #（来自 URL 的哈希）。我正在使用此代码并在我的 index.html 文件中使用 (base href="/") 。它工作正常，但是当我像 (http://0.0.0.0:3000/athletepersonalinfo) 这样刷新页面时，它给了我一个错误。

.config(function($stateProvider,$locationProvider) {
   $locationProvider.html5Mode({ enabled: true, requireBase: false })
   $stateProvider
   .state('/', {
    url: '',
    templateUrl:HTML.HOME,
    controller: 'homeController as home'
    })
   .state('home', {
    url: '/',
    controller: 'homeController as home',
    templateUrl: HTML.HOME
    })

    .state('athletepersonalinfo', {
    url: '/athletepersonalinfo',
    controller: 'athleteProfileInfo',
    templateUrl: HTML.ATHLETE_PERSONAL_INFO,
    authenticate: true
  })

Answer 1

当您点击刷新时，服务器实际上会尝试查找给定路由是否已定义/athletepersonalinfo。要真正从 url 中删除 #，您必须包含一个 get(/*) 路由，该路由将始终返回您的 index.html 页面。这条路线应该在所有其他路线之后。现在这意味着您的index.html 将在没有定义路由时提供服务，而不是在您的客户端角度处理要加载的视图。进行此类更改时需要注意的几点

• 由于任何未解决的 get 都可能返回您的 index.html，因此请确保您的路由有意义，就像您的所有资产都以 /assets/ 路径开头一样，所有 api 调用都以 /api/ 开头。

• 这样做的好处是，如果您在某些资产或 api 调用上收到 404，您仍然会收到您的 index.html，这是错误的。但是使用这种方法，您需要做的就是设置类似这样的路线

  app.get('/:url(api|assets)/*',function(req,res){
      res.status(400).send("Not Found")
  });
  
  app.get('/*',function(req,res){
      res.sendFile('index.html');
  });
  

• 确保 * 路由在所有其他路由之后定义，否则您将继续为每个请求获取 index.html。

希望这会有所帮助。