单页应用程序客户端和服务器路由答案

【问题标题】：Single page application client and server routing单页应用程序客户端和服务器路由
【发布时间】：2015-11-14 16:50:28
【问题描述】：

我有以下代码来使用 HTML5 pushstate（crossroadsjs 和 historyjs 的经典组合）处理客户端导航：

History = window.History;
History.Adapter.bind(window, 'statechange', function () {
var state = History.getState();
console.log(state);
if (state.data.urlPath) {
    return crossroads.parse(state.data.urlPath); 
}
else
{
   if (state.hash.length > 1) {
      var fullHash = state.hash;
      var hashPath = fullHash.slice(0, fullHash.indexOf('?'));
      return crossroads.parse(hashPath);
   }
}});

crossroads.normalizeFn = crossroads.NORM_AS_OBJECT;
crossroads.parse('/');

$('body').on('click', 'a', function(e) {
    var title, urlPath;
    urlPath = $(this).attr('href');

    if (urlPath.slice(0, 1) == '#'){
         return true;
    }

    e.preventDefault();
    title = $(this).text().trim();

    return History.pushState({ urlPath: urlPath }, title, urlPath);
    });

效果很好。现在，为了处理 url 书签和共享，我添加并表达服务器来处理所有请求。它所做的只是重定向到 index.html（一种包罗万象的规则）：

var env = require('./env');
var fallback = require('express-history-api-fallback');
var express = require('express');

var app = express();
var config = env.config();
var root = __dirname + '/dist';

app.use(express.static(root));

app.use(fallback('index.html', { root: root }));

var port = process.env.PORT || 9090;

var server = app.listen(port, function () {
    console.log('Server started at: http://localhost:' + port);
    console.log(config);
});

我面临的问题是它成功重定向到 index.html 但它没有在客户端加载正确的路由。因此，对 www.mysite.com 或 www.mysite.com/anotherpage 的请求将始终加载主页页面路由。

我显然遗漏了一些代码来拦截它并在客户端加载适当的路由。我只是不知道该怎么办。

【问题讨论】：

如果你不想麻烦，有一个框架slim 将承担所有的路由维护。
谢谢，但现在我正在向我的堆栈中添加一个 PHP 框架。没有什么反对的，不要误会我的意思。

标签： express routing single-page-application pushstate

【解决方案1】：

找到错误所在：

crossroads.parse('/');

这总是重定向到“家”路线。我只需要稍微重构一下代码：

History.Adapter.bind(window, 'statechange', this.routeCrossRoads);

routeCrossRoads() {
    var state = History.getState();
    if (state.data.urlPath) {
        return crossroads.parse(state.data.urlPath);
    }
    else {
        if (state.hash.length > 1) {
            var fullHash = state.hash;
            var pos = fullHash.indexOf('?');

            if (pos > 0) {
                var hashPath = fullHash.slice(0, pos);
                return crossroads.parse(hashPath);
            }
            else {
                return crossroads.parse(fullHash);
            }
        }
        else {
            return crossroads.parse('/');
        }
    }
}

【讨论】：