将路由添加到 url答案

【问题标题】：Adding routes to url将路由添加到 url
【发布时间】：2015-01-25 02:49:23
【问题描述】：

我有一些 Javascript 方面的经验，刚刚开始学习 Backbone.js

我的网址如下所示：

.../index.html

页面看起来像这样：

当我点击New User Button 时，URL 如下所示：

...index.html#/new

但我希望它看起来像这样：

...index.html/#/new

谁能解释一下为什么我的网址没有在.html之后添加额外的'/'

正如您将在下面的代码中看到的那样，有一行：<a href="#/new" class="btn btn-primary">New User</a>

为了尝试解决问题，我只是写了..."/#/new...，但这根本不起作用。

有什么想法吗？

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BackboneTutorials.com Beginner Video</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>User Manager</h1>
        <hr />
        <div class="page"></div>    
    </div>  

<script type="text/template" id="user-list-template">

<a href="#/new" class="btn btn-primary">New User</a>
<hr />
<table class="table striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% _.each(users, function(user) { %>
            <tr>
                <td><%= user.get('firstname') %></td>
                <td><%= user.get('lastname') %></td>
                <td><%= user.get('age') %></td>
                <td></td>
            </tr>
        <% }); %>
    </tbody>
</table>


</script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>  
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

    <script>

        $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
        options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
        });

        var Users = Backbone.Collection.extend({
            url: '/users'
        });

        var UserList = Backbone.View.extend({
            el: '.page',
            render: function(){
                var that=this;
                var users = new Users();
                users.fetch({
                    success: function(users){
                        var template = _.template($('#user-list-template').html());
                        that.$el.html(template({users: users.models}));
                    }
                })
            }
        });


        var Router = Backbone.Router.extend({
            routes: {
                '': 'home'
            }
        })

        var userList = new UserList();

        var router = new Router();
        router.on('route:home', function() {
            userList.render();
        });

        Backbone.history.start();

    </script>
</body>
</html>

【问题讨论】：

有人有什么建议吗？我仍然卡在这个小问题上。

标签： javascript html backbone.js routes

【解决方案1】：

如果.../ 打开与.../index.html 相同的页面，它几乎会与.../index.html/#/new 执行相同的操作，它将显示.../#/new。我不确定为什么会发生这种情况，但根据我的经验，我知道在链接时...

文件最后不接受/。
目录会同时读取两者，但总是以附加 / 结尾。

要完成这项工作，您应该在 htaccess 文件中添加一些魔法。不幸的是，我对它不是很熟悉。

【讨论】：

hm 不错的提示，但仍然不能解决问题。希望有人知道该怎么做。感谢您的帮助！
/index.html/ 不是有效的 url，除非您在 .htaccess 中配置了重写规则来处理它。 # 之后的任何内容都是哈希值。根据您需要支持的浏览器，我建议为骨干路由打开 pushState 功能。要启用 pushState，请使用以下命令：Backbone.history.start({ pushState: true });
我试过了，但它什么也没做？有人知道如何在 index.html 之后获得“/”吗？