javascript - 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 就会被提供服务，而不是在客户端 Angular 中处理要加载的 View 。进行此类更改时需要注意的几点

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

• 这样做的好处是，如果您在某些 Assets 或 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。

希望这有帮助。