How to show vue component on only certain routes - vue.js

Question

I want to show my Navbar in every page except the login and register page of my Vue app. How can I do that?
App.vue code:
<template>
<div id="app">
<NavBar v-if="this.$route!= '/' || this.$route!='/register' " />
<main class="form-signin">
<router-view/>
</main>
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
export default {
components: {NavBar}
}
</script>
<style>
nav{
}
#app{
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
min-height: 75rem;
}
body {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body,html{
padding: 0;
margin: 0;
min-height: 100vh;
width: 100%;
}
html{
background-color: white;
}
</style>
I tried using this.$route and v-if , but it wasn't working. The end result still looked like this:
Register page:
Login page:
I just need to exclude the navbar from both of these pages. How can I do that?