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

我在如何将

login

组件与

App.vue

分离方面遇到了问题，因为它是默认的呈现页面。我想要实现的是呈现

登录

（如果用户没有令牌），在呈现

仪表板

、

导航栏

和

菜单时重定向到
加载
页面

我不认为使用
v-if=“loggedIn”
仅仅隐藏菜单不是最佳做法，它仍然呈现
App.vue的

请参阅下面我的当前设置

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>

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

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

我知道这已经有一段时间了，但它可以为其他用户工作

src/App.vue

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

注意，我省略了一些代码

看看这个


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

src/App.vue

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

注意，我省略了一些代码

看看这个



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"),
    },
  ],
});