如何创建不包含 App.vue 组件的登录屏幕

Question

我正在创建一个 SPA，它有登录屏幕和其他视图。但我面临的问题是，登录屏幕视图也包含在导航栏中，但它不应该在那里。然后我使用了路由器导航，它单独显示一个导航栏，没有任何视图，我认为它也可以保护登录视图。

应用程序.vue

<template>
  <section id="app" class="hero">
    <section class="main-content columns is-fullheight has-background-white-bis">
      <Navigation />
      <div class="hero-body">
        <router-view />
      </div>
    </section>
  </section>
</template>

<style>
.menu {
  margin: 25px;
}
</style>

<script>
import Navigation from "@/components/Navigation.vue";
export default {
  name: "app",
  components: {
    Navigation
  }
};
</script>

路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [{
        path: '/LoginUser',
        name: 'login',
        component: LoginUser,
    },
    {
        path: '/',
        name: 'dashboard',
        component: Dashboard,
    },
}]

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

var isAuthenticated = false;
router.beforeEach((to, from, next) => {
    if (!isAuthenticated) next('/LoginUser')
    else next()
})

export default router

Answer 1

要删除专门在登录路由上的导航，您可以v-if向<Navigation />组件添加一个，它会检查该路由是否不在登录页面上：

<Navigation v-if="this.$router.currentRoute.name !== 'login'" />