avalon.router.navigate 失效 #13

bigqiang · 2014-07-29T07:48:14Z

问题复现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo test</title>
    <script src="../avalon.js"></script>
</head>
<style>
    * {word-wrap: break-word;margin:0;padding:0}
    body {background: #f9f9f9;font-size: 14px;}
    .tb {margin-top: 10px;padding-left: 5px;line-height: 30px;border-bottom: 1px solid #CDCDCD;}
    .cl {zoom: 1;}
    .cl::after {content: ".";display: block;height: 0px;clear: both;visibility: hidden;}
    .contents {width: 862px;margin:30px 0 0 20px;background: #FFF;}
    ul li{list-style: none;}
    .tb li {float: left;margin: 0 3px -1px 0;}
    .tb li {_width: 120px;*width:120px: ;}
    a {color: #333;text-decoration: none;}
    .tb a {display: block;padding: 0 10px;border: 1px solid #CDCDCD;background: #E5EDF2;}
    .tb .a a{border-bottom-color: #fff;background: #FFF;font-weight: 700;}
    .tb li {_width:120px;*width:120px;}
    a.tbtxt1 {float:left;border-right-width:0;}
    a.tbtxt2 {float:left;}
    a.tbclose {float:left;border-left-width:0;width:12px;}
</style>
<body>
<div class="contents" ms-controller="box">
    <ul class="tb cl">
        <li ms-repeat="tab.page" ms-class="a:tab.currpage===el.name"><a ms-href="el.url" ms-class-1="tbtxt1:el.name!=='tab1'" ms-class-2="tbtxt2:el.name==='tab1'">{{ el.title }}</a><a ms-if="el.name!='tab1'" ms-click="tab_close(el.name)" href="javascript:;" class="tbclose">X</a></li>
    </ul>
    <div id="main" class="cl" style="margin:10px 5px 5px 10px;width:500px;height:300px">
        <p>{{tab.content}}</p>
    </div>
    <div>
        <a href="#/tab1">显示tab1</a> <a href="#/tab2">显示tab2</a> <a href="#/tab3">显示tab3</a>
    </div>
</div>
<script>
require("mmRouter", function () {
    var model = avalon.define('box', function(vm) {
        vm.tab = {currpage:'tab1',content:'tab1', page:[{name:'tab1', title:'选项卡一',url:'#/tab1'}]};
        vm.tab_close = function (tname) {
            while(true) {
                var l = vm.tab.page.length;
                if (l===1) break;
                loaded[vm.tab.page[l-1].name] = 0;
                if (vm.tab.page[l-1].name===tname) {
                    vm.tab.page.pop();
                    break;
                } else {
                    vm.tab.page.pop();
                }
            }
            avalon.router.navigate("/tab1");
            vm.tab.currpage = 'tab1';
        }
    });
    var loaded = {};
    avalon.router.get("/tab1", function(a) {
        var page = 'tab1';
        model.tab.content = "页面："+page;
        model.tab.currpage = page;
    });

    avalon.router.get("/tab2", function(a) {
        var page = 'tab2';
        var a = {name:page, title:'选项卡二', url:'#/tab2'};
        if (!loaded[page]) {
            loaded[page] = 1;
            model.tab.page.push(a);
        }
        model.tab.content = "页面："+page;
        model.tab.currpage = page;
    });

    avalon.router.get("/tab3", function(a) {
        var page = 'tab3';
        var a = {name:page, title:'选项卡三', url:'#/tab3'};
        if(!loaded[page]) {
            loaded[page] = 1;
            model.tab.page.push(a);
        }
        model.tab.content = "页面："+page;
        model.tab.currpage = page;
    });

    avalon.router.error(function(a) {
        avalon.router.navigate("/tab1");
    })
    avalon.history.start({html5Mode: false});

    avalon.scan();
});
</script>
</body>
</html>

问题描述：设置可以显示多个选项卡，不同路由显示指定的选项卡。可以通过点击显示页面下方的“显示tabxx”来显示出多个选项卡。当点击“X”来关闭选项卡时会执行 tab_close 方法，会将除第一个选项卡外的所有其他选项卡关闭，并使用 avalon.router.navigate("/tab1") 将路由地址改成第一个选项卡的。但实际测试发现，在点点击“X”后，浏览器中显示的路由地址仍保持原先的地址并没有变成 avalon.router.navigate 指定的地址。

gogoyqj · 2015-01-20T10:16:27Z

拉新代码，没有这个问题。sure？

bigqiang closed this as completed Feb 12, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

avalon.router.navigate 失效 #13

avalon.router.navigate 失效 #13

bigqiang commented Jul 29, 2014

gogoyqj commented Jan 20, 2015

avalon.router.navigate 失效 #13

avalon.router.navigate 失效 #13

Comments

bigqiang commented Jul 29, 2014

gogoyqj commented Jan 20, 2015