Vue - Отдельный компонент входа в приложение. vue - PullRequest
Новая
       3

Vue - Отдельный компонент входа в приложение. vue

0 голосов
/ 16 января 2020

У меня проблемы с тем, как отделить компонент login от App.vue, поскольку это страница рендеринга по умолчанию. Чего я хочу добиться, так это рендерить login (если у пользователя нет токена), перенаправлять на страницу loading при рендеринге dashboard, navigation-bar и menu.

. использование v-if="loggedIn" просто для того, чтобы скрыть меню, не является лучшей практикой, оно по-прежнему отображает <script> из App.vue.

Пожалуйста, посмотрите мои текущие настройки ниже.

Приложение. vue

<template>
  <v-app>
    <v-navigation-drawer>
    ...
    </v-navigation-drawer>

    <v-app-bar
    ...
    </v-app-bar>

    // This is where login.vue and dashboard.vue currently resides
    <v-content>
      <v-container>
        <v-fade-transition mode="out-in">
          <router-view />
        </v-fade-transition>
      </v-container>
    </v-content>

  </v-app>
</template>

<script>
import { mapGetters } from 'vuex'

  export default {
    data: () => ({
    ...
    }),

    computed: {
      ...mapGetters([
        'loggedIn'
      ]),
    }
  }
</script>

приложение. js

new Vue({
  el: '#app',
  render: h=>h(App),
  vuetify,
  router,
  store,
});


router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.loggedIn) {
      next({
        name: 'login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    if (store.getters.loggedIn) {
      next({
        name: 'dashboard',
      })
    } else {
      next()
    }
  } else {
    next()
  }

маршруты. js

 { 
    path: '/dashboard', 
    name: 'dashboard', 
    component: () => import('@/views/Dashboard'),
    meta: { requiresAuth: true },
 },
 { 
    path: '/login', 
    name: 'login', 
    component: () => import('@/views/auth/Login'),
    meta: { requiresVisitor: true }
  },

1 Ответ

1 голос
/ 26 апреля 2020

Я знаю, что это было давно, но это могло бы работать для других пользователей.

src / App. vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

src / Containers / Dashboard / Dashboard. vue

<template>
  <div id="main-container">
    <sidebar />
    <div class="container">
      <Header />
      <div id="content">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Dashboard",
  data: () => {
    return {};
  },
  components: {
    sidebar: () => import(/* webpackChunkName: "sidebar" */ "./layout/Sidebar"),
    Header: () => import(/* webpackChunkName: "header" */ "./layout/Header")
  }
};
</script>

src / router / index. js

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "",
      redirect: "home",
      component: () =>
        import(
          /* webpackChunkName: "dashboard" */ "@/containers/dashboard/Dashboard"
        ),
      children: [
        {
          path: "/home",
          name: "home",
          component: () =>
            import(/* webpackChunkName: "home" */ "./../views/Home"),
        },
        {
          path: "/about",
          name: "about",
          component: () =>
            import(/* webpackChunkName: "about" */ "./../views/About"),
        },
      ],
    },
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "login" */ "./../views/Login"),
    },
  ],
});

уведомление Я пропустил код

Проверьте это

VueJS Контейнер панели инструментов

Github repo

...