骨干路由没有哈希值也不起作用

时间:2014-03-23 16:58:11

标签: javascript backbone.js hash

当我咕噜咕噜地为我的应用程序提供服务时,我的骨干路线运行良好,但是当我上传它时,路线都搞砸了。

主页效果很好,但是当我想导航时(例如:http://quentin-morisseau.me/capucime)我登陆404页面。

如果我添加一个#(例如:http://quentin-morisseau.me/#capucime),我会在没有哈希的情况下重新路由,因为链接应该可以工作,最后得到页面。

然后,如果我重新加载我的页面,我也会得到一个404页面。

我的推送状态也是如此。

这是我的代码:

main.js:

    'use strict';

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
            'underscore',
            'jquery'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: '../bower_components/jquery/jquery',
        backbone: '../bower_components/backbone/backbone',
        underscore: '../bower_components/underscore/underscore',
        text: '../bower_components/requirejs-text/text',
        requirejs: '../bower_components/requirejs/require'
    }
});

define(['my-app', 'jquery'], function(Q, $){
    Q.start();
});

my-app.js:

'use strict';
define(['backbone', 'jquery'], function(Backbone, $){
    var Q = {
        Views: {},
        Models: {},
        Collections: {},
        Router: {},
        Status: {},
        init: function(){
            Q.Router = new (Backbone.Router.extend({
                routes: {
                    '': 'home',
                    'capucime': 'capucime',
                    'lequipe': 'lequipe',
                    'nathaniel': 'nathaniel',
                    'comptoir': 'comptoir'
                },

                initialize: function(){
                    Backbone.history.start({pushState: true, root: '/'});
                },

                home: function(){
                    require(['views/home'], function(View){ 
                        var Home = new View();
                        Home.render();
                    })
                },

                capucime: function(){
                    require(['views/capucime'], function(View){ 
                        var Capucime = new View();
                        Capucime.render();
                    })
                },

                lequipe: function(){
                    require(['views/lequipe'], function(View){ 
                        var Lequipe = new View();
                        Lequipe.render();
                    })
                },

                nathaniel: function(){
                    require(['views/nathaniel'], function(View){ 
                        var Nathaniel = new View();
                        Nathaniel.render();
                    })
                },

                comptoir: function(){
                    require(['views/comptoir'], function(View){ 
                        var Comptoir = new View();
                        Comptoir.render();
                    })
                }
            }));
        },
        start: function(){ Q.init(); }
    };
    return Q;
});

感谢您帮助我弄明白:)

昆汀。

编辑:

找到关于.htaccess的答案,如果有人有同样的问题:

# ----------------------------------------------------------------------
# HTML5 pushstate (history) support:
# ----------------------------------------------------------------------

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

这是一个已知问题,我猜......

谢谢大家,顺便说一句。

1 个答案:

答案 0 :(得分:1)

您应该将您的Web服务器设置为路由到您的索引页面,无论如何,&#34; catch-all&#34;路由,从中加载所有的javascript,它将正常工作。

所以,当您点击/capucime时,您应该提供索引页面,例如index.html,让javascript加载正确的页面。

你咕噜咕噜的服务脚本设置了这样的全能路线,但你必须在生产中的网络服务器上配置它,以使你的单页应用/单页面应用程序工作。