'Replacing context from main in router view vue.js

I'm new to Vue and I've got a problem. Idea is to have main app with routes, and only a navbar in the main, everything else is handled by the router. The problem is I don't want to show it on the login page, so I don't duplicate the LOGIN buttons. Can I overwrite it somehow in LoginView?

Main code

<template>
  <v-app class="blue lighten-3">
    <NavBar/>
    <v-main class="mx-4 mb-4">
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  name: 'App',
  components:{
    NavBar
},
  data: () => ({
    //
  }),
};
</script>

and LoginView route code

<template>
  <v-container>
    <v-text-field label="login" v-model="posts.username"></v-text-field>
    <v-text-field
            v-model="posts.password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.min]"
            :type="show1 ? 'text' : 'password'"
            label="password"
            name="input-10-1"
            counter
            @click:append="show1 = !show1"
          ></v-text-field>
    <v-btn text class="mx-0 mt-3" @click="oksubmit()">Zaloguj się</v-btn>
  </v-container>
</template>

So can I somehow overwrite the navbar on the login page?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source