How to make vue-router work?

K

kolo20122017-03-06 13:17:13

JavaScript

kolo2012, 2017-03-06 13:17:13

Good afternoon. This is my first time doing all this, I work as a bnackend developer and sometimes I use jailbreak. Now I want to become fullstack, for the front I chose vue.
I was able to start vue-loader, but it didn’t work out to make friends with the router, or rather, the router didn’t work for me at all. In main.js I wrote something like

import Vue from 'vue';
import VueRouter from 'vue-router';


Vue.use(VueRouter);

const router = new VueRouter({history: true});

router.map({
    '/': {
        name: 'app',
        component: view('App')
    }
});


/**
 * Asynchronously load view (Webpack Lazy loading compatible)
 * @param  {string}   name     the filename (basename) of the view to load.
 */
function view(name) {
    return function (resolve) {
        require(['./views/' + name + '.vue'], resolve);
    }
}
;

export default router;

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>

        <div id="app"></div>
        <script src="/dist/build.js"></script>
    </body>
</html>

The end result is a white screen.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Konstantin Kitmanov, 2017-03-06
@kolo2012

Did routing actually work? Just a static component, no lazy loading, showing up?
In general, require does not do lazy loading, it does require.ensure , that is, it will be something like this (wrote from my head, see the docs):

function view(name) {
    return function (resolve) {
        require.ensure(['./views/' + name + '.vue'], (require) => {
            const loadedComponent = require('./views/' + name + '.vue');
            // тут еще наверное шаг монтирования загруженного компонента
            resolve();
        });
    }
}

Well, it's time to start using import()a non-standard mechanism instead of non-standard extensions :)