Question

我已经使用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（一种catchall规则）：

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 的请求将始终加载到主页页面路线。

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

Answer 1

找到错误的位置：

crossroads.parse（＆＃39; /＆＃39）;

这总是会重定向到＆＃34; home＆＃34;路线。我只需要重构一下代码：

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('/');
        }
    }
}

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

1 个答案: