<nylon-pages>

nylon-pages is an router element for polymer. Use page.js dependency

Here is a basic example.

    <nylon-pages>
        <div path="/">Hello index.</div>
        <div path="/home">Hello home.</div>
        <div path="*">Sorry 404 T_T</div>
    </nylon-pages>

Here is a basic example, when used with another element.

    <nylon-pages>
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-404 path="*"></page-404>
    </nylon-pages>

Here is a basic example, when used with lazy load.

    <nylon-pages on-nylon-pages-changed="_pageChanged">
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-404 path="*"></page-404>
    </nylon-pages>

    _pageChanged(e){
        var elementName = e.detail.element.localName;
        this.importHref(
            this.resolveUrl('/src/' + elementName + '.html'),
            null,
            null,
            true
        );
    }

How to get params on children element.

    <nylon-pages on-nylon-pages-changed="_pageChanged">
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-topic path="/topic/:id"></page-topic>
        <page-404 path="*"></page-404>
    </nylon-pages>

    <!-- children element-->
    <template>
        [[_params.id]]
    </template>

How to change page on polymer.

    <button on-click="simpleFunc">change</button>
    <a href="/topic/1">link</a>
    <nylon-pages id="router" on-nylon-pages-changed="_pageChanged">
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-topic path="/topic/:id"></page-topic>
        <page-404 path="*"></page-404>
    </nylon-pages>

    simpleFunc(){
        this.$.router.redirect('/topic/1')
    }

How to check role and redirect page.

    <nylon-pages on-nylon-pages-role="_checkRole">
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-topic path="/topic/:id" role></page-topic>
        <page-topic-select path="/user/select/:id" role="admin"></page-topic-select>
        <page-401 path="/401"></page-404>
        <page-403 path="/403"></page-403>
        <page-404 path="*"></page-404>
    </nylon-pages>

    _checkRole(e){
        var np = e.detail

        var element = np.element
        var elementName = element.localName;
        var roleValue = element.getAttribute('role')

        var pass = await _checkRoleAnotherFun(...)

        if(pass){
            np.pass()
        }else{
            np.redirect('/403')
        }
    }

How to check rule and redirect page. but no change path

    <nylon-pages on-nylon-pages-rule="_checkRule">
        <page-index path="/"></page-index>
        <page-home path="/home"></page-home>
        <page-topic path="/topic/:id" rule></page-topic>
        <page-topic-select path="/user/select/:id" rule="admin"></page-topic-select>
        <page-401 path="*"></page-404>
        <page-403 path="*"></page-403>
        <page-404 path="*"></page-404>
    </nylon-pages>

    _checkRule(e){
        var np = e.detail

        var element = np.element
        var elementName = element.localName;
        var ruleValue = element.getAttribute('rule')

        if(np.ctx.gotoPage){
            if(elementName=='page-403' && np.ctx.gotoPage=='403')
                np.pass()
        }else{
            var pass = await _checkRuleAnotherFun(...)
            if(pass){
                np.pass()
            }else{
                np.ctx.gotoPage = "403"
            }
        }
    }