개시하다

프로비저닝
1. 환경 구축: https://qiita.com/rayan/items/5d04ee2ca7860c220dec
2. 로그인 페이지: https://qiita.com/rayan/items/1f0576395b9727635461
3. 메뉴: 이번
GiitHub 웨어하우스
준비 중

작업할 파일

src

components

Drawer.js

Header.js

router

index.js

views

MainMenu.vue

src/components/Drawer.vue

탐색 메뉴.일부 관점상의 공통적인 요소 때문에components에 들어갔다.

Drawer.vue에서 propshow을 정의했습니다.이것은 Drawer 요소의 표시가 있는지 없는지를 나타낸다.

내비게이션 메뉴가 표시되고 닫힐 때show=false.이러한 변화를 모 구성 요소인 헤더show에 적용하기 위해 다음과 같이 처리합니다.

show 검측true->false, false->true을 통한 변화.

watch.

이것은 this.$emit('update:show', this.show) 둘 중 점화된 것이기 때문에 true->false, false->true일 때 Drawer가 열리지 않습니다.

부모로서의 헤더는this.$emit('update:show', false) 있다.이것은 다음과 같은 두 가지 배역을 맡고 있다.

:show.sync="show"에서prop:show="show"(왼쪽)에서 대입show(오른쪽)의 값

show에서 아이v-on:update:show="show = $event"사건 갱신을 받은 부모update:show(오른쪽)의 값

<template>
  <v-navigation-drawer
    v-model="show"
    absolute
    temporary
  >
    <v-list>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.link"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
            <v-list-item-content>
          <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: "Drawer",
  components: {
    //
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Preferences', icon: 'mdi-account-cog', link: '/userPreferences'},
      { text: 'Item Registeration', icon: 'mdi-tag-plus' , link: '/itemRegisteration'},
      { text: 'Item List', icon: 'mdi-tag-multiple', link: '/itemList'},
    ]
  }),
  watch: {
    show() {
      this.$emit('update:show', this.show);
    }
  },
};
</script>

src/components/Header.vue

머리글 요소.일부 관점상의 공통적인 요소 때문에components에 들어갔다.

클릭show을 통해 props로 가져온 Drawer를 표시합니다.

표시되지 않은 상태v-app-bar-nav-icon에서 표시되지 않은 상태show=false로 변경됩니다.

Header.vue에서 propshow=true을 정의했습니다.이것은 Header 요소로 표시되는 문자열을 나타냅니다.

<template>
  <div>
    <v-card
      class="mx-auto"
      tile
    >
      <v-toolbar>
        <v-app-bar-nav-icon @click.stop="show = !show"></v-app-bar-nav-icon>
        <v-toolbar-title>{{title}}</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <Drawer :show="show" v-on:update:show="show = $event"/>
  </div>
</template>

<script>
import Drawer from '@/components/Drawer'

export default {
  name: "Header",
  components: {
    Drawer
  },
  data: () => ({
    show: false
  }),
  props: {
    title: String,
  },
};
</script>

src/views/MainMenu.vue

주 메뉴 요소.

props

title를 통해 헤더의 prop<Header :title="title"/>(왼쪽)의 값을 title(오른쪽)의 값으로 설정합니다.

<template>
  <div>
    <Header :title="title"/>
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  name: "MainMenu",
  components: {
    Header
  },
  data: () => ({
    title: 'Main Menu'
  }),
};
</script>

router/index.js

새로 제작된 MainMenu 페이지의 정보를 추가합니다.

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "*",
    redirect: "/"
  },
  {
    path: "/mainMenu",
    name: "MainMenu",
    meta: { requiresAuth: true },
    component: () =>
      import("@/views/MainMenu.vue"),
  },
  {
    path: "/",
    name: "Authentication",
    component: () =>
      import("@/views/Authentication.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  let currentUser = firebase.auth().currentUser
  if (requiresAuth) { // if this page requires auth, redirect to auth page
    if (!currentUser) {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // this is required
  }
})

export default router;

Build

동작을 구축하고 테스트합니다.동작 테스트에 Firebase Emulator가 필요하므로 를 시작합니다.

npm run build
firebase emulators:start

브라우저에서 열람title.로그인한 후 이동할 MainMenu 페이지로 이동합니다.

왼쪽 상단에 있는 세 줄의 아이콘을 클릭하여 아래 그림으로 확인합니다.

다음번

사용자 설정 확인/수정 페이지