点击 `#!/` 链接回调两次

fish-ball commented 9 years ago

我看这个问题被问过好几次了，但是好像也没有解决方案。

直接用回官方代码说明问题：

我再 callback 里面加了一句 console.log(this.path)，可以很清晰看到，每点击一次链接控制台输出两次。

不过，如果我在控制台里面输入：location.hash = #!/aaa/ 这样子，就只会回调一次。这是为什么呢？如何解决？求帮助！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>路由系统</title>
        <script src="avalon.js"></script>
        <script>
            require(["mmRouter"], function() {
                var model = avalon.define('test', function(vm) {
                    vm.currPath = ""
                    vm.params = {}
                    vm.query = {}
                    vm.args = "[]"
                })
                function callback() {
                    console.log(this.path);
                    model.currPath = this.path
                    var params = this.params
                    if ("time" in params) {
                        params.time = avalon.filters.date(params.time, "yyyy年M月dd日")
                    }
                    model.params = params
                    model.query = this.query
                    model.args = "[" + [].slice.call(arguments, 0) + "]"

                }
                avalon.router.get("/aaa/", callback)
                avalon.router.get("/bbb", callback)
                avalon.router.get("/ccc/:ccc", callback)
                avalon.router.get("/ddd/{time:date}/", callback)
                avalon.router.get("/eee/{count:\\d{4}}/", callback)
                avalon.router.get("/fff", callback)
                avalon.history.start({
                    basepath: "/avalon/",
                    html5Mode: false
                });
                avalon.scan()
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <table width="100%" height="300">
                <tr>
                    <td width="250">
                        <ul>
                            <li><a href="#!/aaa">aaa</a></li>
                            <li><a href="#!/bbb?uu=3445345&were=4324">bbb</a></li>
                            <li><a href="#!/ccc/etretr">ccc</a></li>
                            <li><a href="#!/ddd/2014-09-19">ddd</a></li>
                            <li><a href="#!/eee/2222">eee</a></li>
                            <li><a href="#!/fff?a=1&nn=4&dfg=676">fff</a></li>
                        </ul>
                    </td>
                    <td>
                        <div style="color:red">this.path: {{currPath}}</div>
                        <div style="color:blue">arguments: {{args}}</div>
                        <fieldset>
                            <legend>this.params</legend>
                            <ol>
                                <li ms-repeat="params"> {{$key}}: {{$val}}</li>
                            </ol>
                        </fieldset>
                        <fieldset>
                            <legend>this.query</legend>
                            <ol>
                                <li ms-repeat="query"> {{$key}}: {{$val}}</li>
                            </ol>
                        </fieldset>
                    </td>
                </tr>
            </table>
            <div style="height: 600px;width:1px;">

            </div>
            <p id="fff">会定位到这里</p>
        </div>

    </body>
</html>

fish-ball commented 9 years ago

我用了一种比较 dirty 的方法来修正这个问题，但总感觉这不是个办法：

$('body').on('click', 'a', function() {
    var href = $(this).attr('href');
    if(/^#!/.test(href)) {
        location.hash = href;
        return false;
    }
});

fish-ball commented 9 years ago

貌似在 mmState 里面没有这个问题，已经改用 mmState，关闭问题。

RubyLouvre / mmRouter

点击 `#!/` 链接回调两次 #90