Vue router layouts18.07.2024 09:45

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

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

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

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

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

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

// @/layouts/index.vue


<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
	    // что будет равно нашему компоненту 
	    layoutType() {
	      if (this.routeHaveLayoutType) {
	        return this.$route.meta.layout;
	      }
	      return "default";
	    },
		}
	}
</script>

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

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

// @/layouts/components/default.vue

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

// @/layouts/components/tabs


<script>
export default {
  name: "LayoutTabs",
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

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

// @/layouts/components/extra

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

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

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

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

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

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

<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 в компоненте :

{
	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("компонент заглушка который состоит из одного "),
				// кейс с еще более глубокой вложенностью и самостоятельным компонентом для родительского 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.

© Habrahabr.ru