Vue -将登录组件与App.vue分开

Question

由于login组件是默认的呈现页面，所以我在如何将它从App.vue中分离出来方面遇到了困难。我想要实现的是呈现login (如果用户没有令牌)，在呈现dashboard、navigation-bar和menu时重定向到loading页面。

我不认为使用v-if="loggedIn"只是为了隐藏菜单不是最佳实践，它仍然呈现App.vue的<script>。

请参阅下面的当前设置。

App.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>

app.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()
  }

routes.js

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

Answer 1

我知道已经有一段时间了，但它可以适用于其他用户。

src/App.vue

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

src/containers/仪表板/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/路由器/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回购