Exceptation-ea-router: На основе автоматической библиотеки классов маршрутизации vue-router и с официальной поддержкой особенностей. Это упрощает управление маршрутизацией.

И-Эр-Эй роутер

ea-router означает: easy auto router.

Цель — уменьшить объём ручной работы по обслуживанию таблицы маршрутизации при совместной работе нескольких человек и избежать большого количества конфликтов. Освободить разработчика, чтобы он мог сосредоточиться на бизнес-разработке.

Принцип работы основан на сопоставлении каталогов, автоматическом создании результатов анализа маршрутов и преобразовании этих результатов в соответствующие объекты маршрутов с помощью адаптера.

В настоящее время реализован только адаптер для vue-router 3.x, в будущем планируется добавить больше адаптеров и приветствуется вклад кода от других разработчиков.

Рекомендуется использовать вместе с vue-property-decorator!

Простой принцип работы показан на рисунке ниже:

Функции

Установка

npm i -S ea-router

Примеры

Структура каталога выглядит следующим образом:

views
|-- About.vue
|-- Home.vue
|-- Layout.vue
|-- user
    |-- Add.vue

Сгенерированный код выглядит так:

// /src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import AutoRouteGenerator from "ea-router";
import defaultLayout from "../components/defaultLayout";
import notFoundPage from "../components/notFound";

Vue.use(VueRouter);
let generator = new AutoRouteGenerator(
  require.context("../views", true, /\.vue$/)
);

generator.setDefaultLayout(defaultLayout);
generator.setNotFoundPage(notFoundPage);

const routes = generator.generate();
const router = new VueRouter({
  routes
});

export default router;

Точка входа в проект:

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Окончательная автоматически созданная таблица маршрутизации (файл не создаётся во время выполнения, он просто показывает, как будет выглядеть автоматически созданный объект маршрута) выглядит так:

const routes = [
  {
    path: "/",
    component: () => import("src/views/layout.vue"),

    children: [
      {
        path: "home/:id/:name",
        component: () => import("src/views/home.vue"),
        props: true
      },

      {
        path: "about",
        component: () => import("src/views/about.vue")
      },

      {
        path: "user",
        component: () => import("src/components/defaultLayout.vue"),

        children: [
          {
            path: "add",
            component: () => import("src/views/user/add.vue")
          }
        ]
      }
    ]
  },

  {
    path: "*",
    component: () => import("src/components/notFound.vue")
  }
];
export default routes;

Правила

Поскольку это автоматизация, конечно, необходимо соблюдать определённые соглашения:

Каждый файл .vue в каталоге представляет собой объект маршрута, соответствующий определённому URL.
Каталог Layout.vue автоматически регистрируется как текущий каталог и маршрут.
В многоуровневой структуре каталогов каждый каталог должен содержать Layout.vue, чтобы обеспечить поэтапное рендеринг (конечно, вы также можете использовать API для установки стандартного).

Использование

На данный момент существует четыре API и пять декораторов.

API:

generate
setDefaultLayout
setNotFoundPage
ignore

Декораторы:

@RouteName
@Alias
@Context
@EnableProps
@Meta

`ignore` API

Иногда в файлах маршрутов могут быть компоненты, тесно связанные с страницами, например макеты (заголовки, нижние колонтитулы, навигационные меню и т. д.). Однако они не являются частью маршрута и поэтому могут использовать режим игнорирования.

Параметр представляет собой запись файла или каталога, обратите внимание, что ./ указывает на указанный каталог файла маршрута, поэтому его необходимо добавить.

Ниже показано, как игнорировать все компоненты и каталоги макетов в каталоге views.

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /\.vue$/))
generator.ignore('./**/components/*', './**/layouts/*');

export default new Router({
  routes: generator.generate()
})

После этой операции содержимое этих двух папок будет проигнорировано в таблице маршрутов. И не появится в маршруте.

`generate` API

Конструктор принимает каталог и правила фильтрации через require.context, как показано в следующем примере, который указывает на каталог views и все файлы .vue.

Это API для создания маршрутов, которое вызывает метод генерации для создания объекта маршрута, соответствующего маршрутному адаптеру. В настоящее время он использует vue 2.x по умолчанию.

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /\.vue$/))

export default new Router({
  routes: generator.generate()
}) ```
// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

SetDefaultLayout api

Чтобы указать стандартный Layout.vue, можно использовать его напрямую:

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";
import DefaultLayout from './components/defaultLayout.vue';

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /\.vue$/))
generator.setDefaultLayout(DefaultLayout);

export default new Router({
  routes: generator.generate()
})

<!-- /src/components/defaultLayout.vue -->
<template>
    <router-view></router-view>
</template>

SetNotFoundPage api

Можно настроить страницу, которая будет отображаться при отсутствии соответствия маршрута:

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import RouteGenerator from "ea-router";
import NotFoundPage from './components/notFound.vue';

Vue.use(Router)
let generator = new RouteGenerator(require.context('./views', true, /\.vue$/))
generator.setNotFoundPage(NotFoundPage);

export default new Router({
  routes: generator.generate()
})

<!-- /src/components/notFound.vue -->
<template>
    <div>
        嘿，页面走丢啦！    
    </div>
</template>

@RouteName(name: string) decorator

Позволяет задать имя маршрута в vue-router:


import { Vue, Component } from 'vue-property-decorator';
import { RouteName } from 'ea-router';

@RouteName('YourComponentRouteName')
@Component
export default class YourComponent extends Vue {
}

Это эквивалентно:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory', 
        name: 'YourComponentRouteName',
        component: YourComponent,
    }
  ]
})

Обратите внимание, что правило генерации пути — это относительный путь (корневой каталог — это каталог, переданный конструктору).

@Alias(alias: string) decorator

Устанавливает псевдоним маршрута, соответствующий псевдониму в vue-router:


import { Vue, Component } from 'vue-property-decorator';
import { Alias } from 'ea-router';

@Alias('YourComponentAlias')
@Component
export default class YourComponent extends Vue {
}

Эквивалентно:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory', 
        alias: 'YourComponentAlias',
        component: YourComponent,
    }
  ]
})

@Context(params: string[]) decorator

Задаёт контекст маршрута, который соответствует $routes.params в vue-router:


import { Vue, Component } from 'vue-property-decorator';
import { Context } from 'ea-router';

@Context('id', 'type')
@Component
export default class YourComponent extends Vue {
}

Будет создан путь в соответствии с порядком параметров.

Эквивалент:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory/:id/:type',
        component: YourComponent,
    }
  ]
})

Примечание: если одновременно используются @Alias и @Context, параметры контекста автоматически добавляются после псевдонима, как в следующем примере:


import { Vue, Component } from 'vue-property-decorator';
import { Context, Alias } from 'ea-router';

@Alias('YourComponentAlias')
@Context('id', 'type')
@Component
export default class YourComponent extends Vue {
}

Эквивалентен:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory/:id/:type',
        alias:'YourComponentAlias/:id/:type',
        component: YourComponent,
    }
  ]
})
``` **@EnableProps()** декоратор

Включает логический режим параметров маршрута, который соответствует **логическому режиму передачи параметров в vue-router**.

```javascript
import { Vue, Component } from 'vue-property-decorator';
import { EnableProps } from 'ea-router';

@EnableProps()
@Component
export default class YourComponent extends Vue {
}

Эквивалентно:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory',
        props: true,
        component: YourComponent,
    }
  ]
})

Примечание: обычно используется вместе с @Context.

@Meta(meta: object) декоратор

Устанавливает метаданные маршрута, которые соответствуют метаданным маршрутов в vue-router.

import { Vue, Component } from 'vue-property-decorator';
import { Meta } from 'ea-router';

@Meta({
    title: 'Component Title',
    requireAuthorize: true
})
@Component
export default class YourComponent extends Vue {
}

Эквивалентно:

const router = new VueRouter({
  routes: [
    { 
        path: 'path/to/component/on/directory',
        component: YourComponent,
        meta: {
                  title: 'Component Title',
                  requireAuthorize: true
              },
    }
  ]
})

About

Halo, я — Рою, и буду рад, если эта библиотека вам поможет. Если у вас возникнут проблемы при использовании, не стесняйтесь создавать issues или связываться со мной напрямую по электронной почте.

Приглашаю всех желающих внести свой вклад в код и постоянно его улучшать.

License

Лицензия MIT

OSCHINA-MIRROR/Exceptation-ea-router

Функции

Установка

Примеры

Правила

Использование

`ignore` API

`generate` API

SetDefaultLayout api

SetNotFoundPage api

@RouteName(name: string) decorator

@Alias(alias: string) decorator

@Context(params: string[]) decorator

@Meta(meta: object) декоратор

About

License

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Язык

Недавние действия

OSCHINA-MIRROR/Exceptation-ea-router .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Функции

Установка

Примеры

Правила

Использование

ignore API

generate API

SetDefaultLayout api

SetNotFoundPage api

@RouteName(name: string) decorator

@Alias(alias: string) decorator

@Context(params: string[]) decorator

@Meta(meta: object) декоратор

About

License

Комментарии ( 0 )

Введение

Обновления (1)

Участники

Язык

Недавние действия

OSCHINA-MIRROR/Exceptation-ea-router

`ignore` API

`generate` API