Vue router layouts

Добавление layout системы в существующий проект на Vue с использованием Vue router.

В данном примере будем рассматривать проект на Vue2 options api с использование Vue Router v3. В теории не вижу особых проблем в применении для Vue3 с composition api.

Репозиторий с реализацией

Задача: ускорить создание типовых страниц по средствам layout системы с возможностью передачи названия необходимого шаблона для страницы примерно похожей на реализацию в nuxt3.

Создаем директорию для наших шаблонов в корне проекта @/layouts

Оформляем основной компонент в котором будем определять нужный шаблон:

// @/layouts/index.vue <template> <component :is="layoutComponent"> </template>  <script> import "Наш компонент с лейаутом"  export default { name: "layout", components: { Наши компоненты layout }, computed: { // генерируем имя нужного нам компонента заранее импортированного // не делаю динамического импорта тк компонентов с лейаутами  // как правило не много, при необходимости можно добавить      layoutComponent() {       return `layout-${this.layoutType}`;     },          routeHaveLayoutType() {       return this.$route.meta && 'layout' in this.$route.meta;     },          // Определяем каой layout нам нужно использовать     // для указания используем $router.meta, по умолчанию default     // что будет равно нашему компоненту <layout-default />     layoutType() {       if (this.routeHaveLayoutType) {         return this.$route.meta.layout;       }       return "default";     }, } } </script>

Создаем рядом директорию для будущих шаблонов @/layouts/components

Создаем default шаблон для компонентов:

// @/layouts/components/default.vue <template>   // Ваша логика для default layout   // ключающая в себя router-view    // Например   <div class="container">   <header>My header</header>   <main>   <router-view />   </main>   <footer>My footer</footer>   </div> </template>

Создаем дополнительно ещё один произвольный шаблон tabs, который будет реализовывать страницу в виде табов, где табы — ссылка на страницу:

// @/layouts/components/tabs <template>   <div class="container">     <div class="tabs">       <RouterLink           v-for="(tab, index) in tabs"           :key="index"           :to="tab.path"           class="tabs__item"           active-class="is-active"       >         {{ tab.title }}       </RouterLink>     </div>     <div class="tabs__content">       <router-view />     </div>   </div> </template>  <script> export default {   name: "LayoutTabs",   props: {     tabs: {       type: Array,       default: () => [],     },   }, } </script>

Создаем еще один дополнительный шаблон extra для демонстрации:

// @/layouts/components/extra <template>   <div class="container">     <heading>Extra layout</heading>     <router-view></router-view>   </div> </template>

В корне проекта, в моем случае это App.vue в корне проекта, используем ранее созданный компонент <layout /> вместо существующего <router-view/>

<template>   <div id="app">     // Было   // <router-view />      // Стало     <layout />   </div> </template>

Создаем базовую структуру router, согласно документации vue-router, в приложении либо используем существующую:

const routes = [ { path: "/", component: () => import(Ваш компонент страницы), ... } ... ]

Для определения нужного layout используем router.meta:

{ path: "/", components: () => import(Ваш компонент), meta: { layout: "extra", }, }

Для определения табов так же можно используем router.meta в родительском route, для этого нужно будет немного обновить код в нашем @/layouts/index:

<template>   <component :is="layoutComponent" :tabs="layoutTabs" :parentRoute="parentRoute" /> </template>  <script> import LayoutDefault from "./components/default.vue"; import LayoutExtra from "./components/extra.vue"; import LayoutTabs from "./components/tabs.vue";  export default {   name: "Layout",   components: {     LayoutDefault,     LayoutExtra,     LayoutTabs,   },   computed: {     routeHaveLayoutType() {       return this.$route.meta && 'layout' in this.$route.meta;     },     parentRouteHaveLayoutType() {       return this.parentRoute && this.parentRoute.meta && 'layout' in this.parentRoute.meta;     },     routeHaveLayoutTabs() {       return this.$route.meta && 'layoutTabs' in this.$route.meta;     },     parentRouteHaveLayoutTabs() {       return this.parentRoute && this.parentRoute.meta && 'layoutTabs' in this.parentRoute.meta;     },     layoutType() {       // проверяем содержит ли текущий route layout       if (this.routeHaveLayoutType) {         return this.$route.meta.layout;       }              // проверяем содержит ли родительский route layout       if (this.parentRouteHaveLayoutType) {         return this.parentRoute.meta.layout;       }              // возвращаем дефолтный по умолчанию если ничего не нашли       return "default";     },     layoutComponent() {       return `layout-${this.layoutType}`;     },     layoutTabs() {       if (this.layoutType === 'tabs') {       // если в текущем route указаны табы для layout то используем их         if (this.routeHaveLayoutTabs) {           return this.$route.meta.layoutTabs;         }                  // пробуем найти перечисление табов в родительском route         if (this.parentRouteHaveLayoutTabs) {           return this.parentRoute.meta.layoutTabs;         }         return [];       }       return [];     },          // находим родительский route     parentRoute() {       const currentInMatched = this.$route.matched.find(i => i.regex.test(this.$route.path));       return currentInMatched && currentInMatched.parent;     }   }, } </script> 

Если проект полностью на Vue и Vue-router, можно привязаться к children и из них формировать структуру дочерних табов, для этого обновим computed в компоненте <layout/>:

{ computed: { ...       layoutTabs() {       // при использовании parentRoute.children как табы       if (this.parentChildren) {         return this.parentChildren.map((i, k) => {           return {             path: i.path,             title: 'tabTitle' in i.meta && i.meta.tabTitle || `tab${k}`,           }         });       }        // при передачи табов как meta.layoutTabs       if (this.layoutType === 'tabs') {         if (this.routeHaveLayoutTabs) {           return this.$route.meta.layoutTabs;         }         if (this.parentRouteHaveLayoutTabs) {           return this.parentRoute.meta.layoutTabs;         }         return [];       }       return [];     },          // находим children текущего route     parentChildren() {       if (!this.parentRoute) return [];       const parentRoute = this.$router.options.routes.find(i => this.parentRoute.regex.test(i.path) );       return parentRoute && parentRoute.children;     }, } }

При использовании в дочерних route своего собственного layout и наличии его собственных дочерних route оформляем код в формате:

[ { path: "default", component: () => import("компонент страницы"), }, { path: "tabs", redirect: "/tabs/red", meta: { layout: "tabs", layoutTabs: массив табов // если берем табы из meta }, children: [ { path: "red", component: () => import("компонент заглушка который состоит из одного <router-view />"), // кейс с еще более глубокой вложенностью и самостоятельным компонентом для родительского route "red" children: [ { // для корневого роута "red" path: "", component: () => import("ваш компонент red страницы"), }, { path: "orange", component: () => import("ваш компонент oragne страницы"), meta: { layout: "extra", }, }, { path: "tomato", component: () => import("ваш компонент tomato страницы"), meta: { layout: "extra", }, } ], }, { path: "green" component: () => import("ваш компонент green страницы"), }, { path: "blue", component: () => import("ваш компонент blue страницы"), } ] } ]

Полную реализацию примера можно посмотреть на Github