SOURCE

Yox.component("MainLayout", {
    template: `
        <Layout style="height: 100%;">
            <LayoutSider style=" color: #fff">
                <template slot="logo">
				{{version}}
				</template>

                <Menu theme="dark" mode="inline">
                    {{#each menus}}
                        <SubMenu name="{{name}}">
                            <template slot="title">{{label}}</template>
                            {{#each sub}}
                            <MenuItem name="{{name}}" on-click="doOpenMenu(this)">{{label}}</MenuItem>
                            {{/each}}
                        </SubMenu>
                    {{/each}}
                </Menu>
            </LayoutSider>

            <Layout vertical>
                <LayoutHeader>LayoutHeader</LayoutHeader>
                <LayoutContent>
                
                    <Tabs model="activeTab" type="card" closable="{{ true }}" on-tab-remove="removeTab($data)">
					{{#each tabs}}
						<TabPanel key="{{name}}" name="{{name}}" label="{{label}}">
							{{#if this.component != "" }}
								<ContentComponent {{...this}} />
							{{else}}
								<Empty>Error, Component is not defined</Empty>
							{{/if}}
						</TabPanel>
					{{/each}}
					</Tabs>
                
                </LayoutContent>
            </Layout>
        </Layout>
    `,

    data(){
        return {
            version: Yox.version,
            menus: [],
            tabs: [
                {
					name: "home",
					label: "主页",
					component: "HomeComponent"
				}
            ],
            activeTab: "home",
        }
    },
    methods: {
        isNavTabCreate(name) {
			return _.find(this.get("tabs"), (n) => {
				return n.name === name;
			});
		},
        doOpenMenu(menu){
			if (!this.isNavTabCreate(menu.name)) {
				this.append("tabs", menu);
			}  

            this.set("activeTab", menu.name)
        },
        removeTab(data){
            let list = this.copy(this.get('tabs'), true)
			this.set({
				tabs: list.filter(item => {
					return item.name !== data.name
				})
			})
        }
    },
    afterMount(){
        var me = this;
        this.set("menus", this.copy(store.get("menus"), true))
    }
});

Yox.component("HomeComponent", {
    template: `
    <div style="border: 1px solid; margin: 10px">
        HomeComponent
    </div>
    `,
    events: {
    }
});

Yox.component("ContentComponent", {
    template: `
    <div style="border: 1px solid; margin: 10px">
        <$component {{...this}} />
    </div>
    `,
    events: {
    }
});


Yox.component("Page1", {
    template: `
    <div style="border: 1px solid; margin: 10px">
        Page1, called: {{called}}, {{time}}

         <Pagination
            total="{{ 1000 }}"
            pageSize="{{ 10 }}"
            pageSizeOptions="{{ [10,20,30] }}"
            on-change="doPagination"
        />
    </div>
    `,
    data (){return {
        called: 0
    }},
    afterMount() {
        this.test()
    },
    events: {
		doPagination(event){
            event.stop()
            this.test()
        }		
    },
    methods:{
        test(){
            this.increase("called")
            this.set("time", new Date().getTime())
        }
    }
});

Yox.component("Page2", {
    template: `
    <div style="border: 1px solid; margin: 10px">
        Page2, called: {{called}}, {{time}}
    </div>
    `,
    data (){return {
        called: 0,
        time: new Date().getTime()
    }},
    afterMount() {
        this.increase("called");
        this.set("time", new Date().getTime())
    }
});

Yox.component("Page3", {
    template: `
    <div style="border: 1px solid; margin: 10px">
        Page3, called: {{called}}, {{time}}
    </div>
    `,
    data (){return {
        called: 0
    }},
    async afterMount() {
        this.increase("called")
        this.set("time", new Date().getTime())
    }
});

let store = new Yox();

store.set("menus", [
		{
			name: "1",
			label: "数据表格",
			sub: [
				{
					name: "1-1",
					label: "Page1",
					component: "Page1"
				}, 
                {
	                name: "1-2",
					label: "Page2",
					component: "Page2"
				},
                {
	                name: "1-3",
					label: "Page3",
					component: "Page3"
				}
			]
		}
]);

Yox.use(YoxRouter);

let router = window.router = new YoxRouter.Router({
    el: '#app', //mode: 'history',
    route404: {
        path: '/404',
        component: {
            template: `<div>404</div>`
        }
    },

    beforeEnter(to, from, next) {
        next()
    },

    routes: [
        {
            path: "/",
            component: {
                template: `<div>
                <a o-replace="/main">GOTO MAIN</a>
                </div>`
            }
        },
        {
            path: '/main',
            component: Yox.component("MainLayout"),
        }
    ]
});

router.start();
router.replace("/")

<div id="app"></div>
<link rel="stylesheet" href="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.css">
<script src="//unpkg.com/yox@1.0.0-alpha.121/dist/standard/dev/yox.js"></script>
<script src="https://unpkg.com/yox-router@1.0.0-alpha.53/dist/yox-router.js"></script>
<script src="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.js"></script>

<script src="//unpkg.com/lodash@4.17.15/lodash.js"></script>
 

html, body, #app {
     height: 100%;
}