wuzhi-vue-router

routes example

import Vue from "vue";
import WuzhiRouter from "wuzhi-vue-router";
Vue.use(WuzhiRouter);
const Foo = { render(h) { return h('div', ['foo', h('wuzhi-router-view')]) } };
const Bar = { render(h) { return h('div', 'bar') } }
const Hello = { render(h) { return h('div', this.$route.query.hello) } }
const Hi = { render(h) { return h('div', ['hi', h('wuzhi-router-view')]) } };
const Woods = { render(h) { return h('div', this.$route.params.id) } }

const routes = [
    {
        path: '/foo',
        component: Foo,
        children: [
            {
                path: '/hello',
                component: Hello
            },
            {
                path: '/hi',
                component: Hi,
                children: [
                    { path: '/:id', component: Woods }
                ]
            }
        ]
    },
    {
        path: '/bar',
        component: Bar
    }
]
const router = new WuzhiRouter({
    routes
});
export default router

template example

<template>
    <div id="app">
        <wuzhi-router-link to="/foo">foo</wuzhi-router-link>
        <wuzhi-router-link :to="{path: '/foo/hello'}">foo/hello</wuzhi-router-link>
        <wuzhi-router-link :to="{path: '/foo/hi'}">foo/hi</wuzhi-router-link>
        <wuzhi-router-link :to="{path: '/foo/hi/woods'}">foo/hi/woods</wuzhi-router-link>
        <wuzhi-router-link :to="{path: '/bar'}">bar</wuzhi-router-link>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <wuzhi-router-view></wuzhi-router-view>
    </div>
</template>