передать дополнительные свойства значению метаполя маршрутизатора - PullRequest
Новая
       3

передать дополнительные свойства значению метаполя маршрутизатора

1 голос
/ 04 марта 2020

Я создаю панель администратора с Vuetify, которая защищена аутентификацией. По сути, мне нужно несколько макетов, потому что моему представлению входа в систему не нужны панель инструментов, боковая панель и т. Д. c.

Я создал PublicCenteredLayout для моего компонента входа 

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

и добавьте поле метатега в мой маршрут входа в систему 

{
  path: "/login",
  component: Login,
  meta: { layout: PublicCenteredLayout }
}

, и с помощью динамических c компонентов я отображаю правильный макет с помощью $route.meta.layout. Как вы видите, в макете используются предопределенные столбцы <v-col cols="12" sm="8" md="4"> Я хотел бы знать, есть ли способ передать эту информацию в поле макета в качестве дополнительных значений. Псевдокод будет

meta: { layout: PublicCenteredLayout { sm:8, md:4 } }

, но это неверный синтаксис. Единственное решение, о котором я мог подумать, было бы 

meta: {
  layoutInfo: {
    component: PublicCenteredLayout
    // additional fields here
  }
}

, чтобы я мог получить доступ к этим полям через $route.meta.layoutInfo.sm. Это решение может быть не лучшим, потому что JavaScript предоставляет это значение, даже если оно не существует. С Vue 3 я хотел бы переключиться на TypeScript, и тогда я мог бы столкнуться с некоторыми ошибками.

Есть лучшие идеи для этого?

1 Ответ

1 голос
/ 04 марта 2020

Я делаю это ... src / App. vue

<template>
  <v-app>
    <component :is="layout">
      <router-view :layout.sync="layout" />
    </component>
  </v-app>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    layout: "div"
  })
};
</script>

А затем на страницах просмотра я импортирую шаблон, который хочу использовать, и передам его .... Это. vue просмотр страницы использует базовый c. vue макет 

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Basic from "../layouts/basic.vue";
export default Vue.extend({
  name: "About",
  created() {
    this.$emit("update:layout", Basic);
  }
});
</script>

И этот, другой шаблон 

<template>
  <div class="dashboard">
    <h1>This is my dashboard page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Fancy from "../layouts/fancy-with-menu.vue";
export default Vue.extend({
  name: "Dashboard",
  created() {
    this.$emit("update:layout", Fancy);
  }
});
</script>
...