Роутинг на Quasar-Framework автоматически

Question

Я думаю многие сталкивались с проблемой, когда в проекте Quasar есть много файлов и страниц и каждый раз новую страницу приходится вручную прописывать в файл с маршрутами. При этом часто просто забываешь это сделать, что приводит к тому что при загрузке сайта видишь 404 ошибку. Кроме того по сути это лишняя работа, так как этот процесс возможно автоматизировать.

В Nuxt например маршруты строятся автоматически, хотелось бы подобной функциональности и на Quasar. Возможно ли это реализовать?

Answer 1

В этой статье привожу метод, который позволит генерировать файл с маршрутами автоматически по структуре директорий проекта.

Наша задача: Найти все файлы *.vue в директории /src/pages и во всех её поддиректориях. Мы напишем NodeJs скрипт, который строить файл с маршрутами автоматически по этой информации и сделаем авто-запуск этого скрипта при сборке проекта Quasar.

Рабочий скрипт может выглядеть примерно так:

const glob = require('glob');
const fs = require('fs');
const patternAll = 'src/**/*.@(js|vue)';
const componentsPaths = glob.sync("src/pages/**/*.vue");
console.log("Files: ", componentsPaths, "\n");
let items = "";
for(let path of componentsPaths) {
    let rpath = path.substring("src/pages/".length, path.length - 4);
    if(rpath.endsWith("Index")) 
        rpath = rpath.substring(0, rpath.length - "Index".length);
    else  if(rpath.endsWith("Error404"))
        continue;
    items += `        { path: '${rpath}', component: () => import(\'${path}\') },\n`;
}
const text = `
const routes = [
    {
      path: '/',
      component: () => import('layouts/MainLayout.vue'),
      children: [
${items}
        ]
    },
    {
      path: '*',
      component: () => import('pages/Error404.vue')
    }
  ]
  export default routes
  `
  console.log("autoRoutes.js: ", text);
  fs.writeFile('./src/router/autoRoutes.js', text, () => {
      console.log("All done!");
  })

Кладём наш скрипт в корневую директорию проекта c названием makeAutoRoutes.js и тестируем: node makeAutoRoutes В консоли мы должны увидеть листинг результирующего файла и надпись "All done!", так же должен создаться файл с кодов /src/router/autoRoutes.js, в котором и находятся все наши автоматически построенные маршруты.

Что бы подключить этот файл в роутер, меняем в файле /src/route/index.js строку import routes from './routes' на import routes from './autoRoutes'. С этого момент наш роутер будет работать с нашим новым файлом, который генерится автоматически.

Осталось прописать наш скрипт makeAutoRoutes на автозапуск при сборке проекта. Это делается очень легко: Добавляем первой строчкой в файл quasar.conf.js строку require('./makeAutoRoutes.js').

Теперь запускаем сборку Quasar quasar build или quasar dev и все файлы vue в папке /src/pages автоматически подключены как маршруты.

Наслаждаемся!

PS: После того как я проверил мой метод и написал эту статью, я узнал что такая функциональность уже планируется в Quasar, и более того уже в процессе реализации.

Но тем не менее выкладываю эту статью, так как пока неизвестно когда эта функциональность будет реализована.

БЛОГ НА HUSL

Роутинг на Quasar-Framework автоматически

Ответы (1 шт):