Задать вопрос
@kolo2012
javascript

Как заставить работать vue-router?

Добрый день. Я впервые взялся за всё это, я работаю bnackend -разработчиком и иногда юзал джейквери. Сейчас хочу стать fullstack, для фронта выбрал vue.

Я смог завести vue-loader но подружить его с роутером не вышло, точнее роутер у меня вообше не заработал. В main.js написал что-то вроде 
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>


В итоге "белый экран"
  • Вопрос задан
  • 379 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
А в принципе роутинг заработал? Просто статичный компонент, без ленивой загрузки, показывается?

Вообще require не делает ленивую загрузку, ее делает require.ensure, то есть будет как-то так (писал из головы, смотрите доки): 

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


Ну и пора начинать использовать import() вместо нестандартных расширений нестандартного механизма:)
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (back-end / full-stack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать микросервис внутри проекта на Golang + PostgreSQL
06 мая 2024, в 16:33
25000 руб./за проект
Сделать набор задач для SEO-старта нового сайта на Тильде
06 мая 2024, в 16:15
1000 руб./за проект
Сделать сайт для спортивных турниров node.js
06 мая 2024, в 16:14
50000 руб./за проект
Ещё заказы