如何在前端使用 SPA 设置 Sails.js 路由以支持 pushstate

Question

如何设置 SailsJS 路由以支持 pushstate，但仍然能够服务以 /api 为前缀的请求以及服务静态资产？

使用：

• 带有pushState: true 的主干1.x
• 帆 0.10.x

此thread 的建议解决方案是使用/* 通配符并将所有内容重定向到索引视图。

/path/to/app/config/routes.js

'/*': {
  view: 'index' 
}

问题是这会将所有内容重定向到索引。包括静态文件资产， express.static 中间件似乎没有效果，这条路线以某种方式优先。

此外，下面的这个前缀没有任何效果，因为上面的路由优先，但是如果我只删除通配符，前缀就可以工作，即'/': { view: 'index' }

/path/to/app/config/blueprint.js

module.exports.blueprints = {
    ...
    prefix: '/api',
    ...
}

显然，这似乎不是 SailsJS 的核心问题，而是我对 expressjs 路由器的了解最少，因为这就是sailsjs 所使用的。

理论上，我可以明确列出所有以资产为前缀的路由并拥有一个控制器来服务所有路由，因为它们是众所周知且静态的，即'/js*': { controller: 'AssetsController', action: 'serve'，以此类推'/styles*'、'/images*'、@987654331 @，'/fonts*'，但我真的很犹豫，我希望有更好的实践解决方案。

这也不能解决这个路由/api通配符'/*'的问题

Answer 1

尝试更新您的 config/404.js 文件。

1. 删除以下内容：

     res.status(result.status);
     res.render(viewFilePath, function (err) {
       // If the view doesn't exist, or an error occured, send json
       if (err) { return res.json(result, result.status); }
   
       // Otherwise, serve the `views/404.*` page
   
       res.render(viewFilePath);
     });
   

2. 添加这个：res.redirect("/");

干杯

Answer 2

如果您愿意使用development version of Sails from GitHub，您可以使用skipRegex 路由选项让您的通配符路由忽略API 请求，并使用skipAssets 选项让它忽略资产URL：

'/*' : {view: 'index', skipAssets: true, skipRegex: /^\/api\/.*$/}

否则，您可以创建一个控制器来为您的视图提供服务，并在操作代码中添加代码以跳过无意匹配的 URL：

// api/controllers/StaticController.js
module.exports = {
   index: function(req, res, next) {
      if (req.path.match(/\..*/g) || req.path.match(/^\/api\/.*$/)) {
         return next();
      }
      return res.view('index');
   }
}

然后在/config/routes.js:

'/*': 'StaticController.index'

......