Async route on index.html


#1

I successfully installed and configured framework7. Now I’m playing with kitchensink code, but I can’t manage to do a simple thing. I can’t make async route to work on “/” path. My sample code is going like this:

    <div id="app">
    <div class="statusbar"></div>
    <div class="panel panel-left panel-cover">
        <div class="page" data-name="/">
            <div class="page-content">
                <div class="block-title">Left Panel</div>
                <div class="block">
                    <p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
                </div>
                <div class="block-title">Main View Navigation</div>
                <div class="list links-list">
                    <ul>
                        <li>
                            <a href="/about/" class="panel-close">About</a>
                        </li>
                    </ul>
                </div>
                <div class="block">
                    <p>Lorem ...</p>
                    <p>Duis ...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="view view-main view-init ios-edges" data-url="/">
        <div class="page">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link icon-only panel-open" data-panel="left">
                            <i class="icon f7-icons ios-only">menu</i>
                            <i class="icon material-icons md-only">menu</i>
                        </a>
                    </div>
                    <div class="title sliding">Application</div>
                </div>
            </div>
            <div class="page-content">
                <div class="row">&nbsp;</div>
                <div class="row">
                    <div class="col-100 text-align-center">
                        <div class="preloader color-orange"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-100 text-align-center">
                        <div class="color-orange">Loading ...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

My application.js is going like this:

    myApp = new Framework7({
    id: 'io.framework7.test',
    root: '#app',
    theme: 'auto',
    data: function () {
        return {
            user: {
                firstName: 'John',
                lastName: 'Doe',
            },
        };
    },
    methods: {
        isLogged: async function () {
            return false;
        },
    },
    routes:[{
        path: '/',
        async(routeTo, routeFrom, resolve, reject) {
            debugger
            let self = this;
            let app = self.$app;
            return app.isLogged()
                .then(is_logged => {
                    if (!is_logged) {
                        debugger
                        resolve({ url: './pages/login.html' });
                    }
                    else {
                        resolve({ url: './pages/main.html' });
                    }
                });
        }
    }
    ],
    vi: {
        placementId: 'pltd4o7ibb9rc653x14',
    },
});

Does anyone notice what’s wrong? Thank you!


#2

http://framework7.io/docs/view.html#initial-page-route