How to route in VueJS using router?

Question

I followed a tutorial for Okta OAuth with VueJS. I have a default page that show's "App.vue" component and then also "About.vue" component when clicked on "/about" route. However, when the "about" link is clicked, I also see the component from App.vue component below my About.vue component. I am not sure why I am still seeing my App.vue component in "/about" route.

The following is my main.js file:

import Vue from 'vue'
import App from './App.vue'
import About from './About.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Auth from '@okta/okta-vue'
import VueRouter from 'vue-router'
import cors from 'cors'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/implicit/callback', component: Auth.handleCallback() },
    { path: '/about', component: About },
  ]
})

Vue.use(Auth, {
  issuer: 'https://dev-REDACTED.okta.com/oauth2/default',
  clientId: 'REDACTED',
  redirectUri: 'http://localhost:8080/implicit/callback', // Handle the response from Okta and store the returned tokens.
  scopes: ['openid', 'profile', 'email'],
  pkce: true 
})


Vue.config.productionTip = false
//Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.use(VueRouter)
Vue.use(cors)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

My App.vue component contains the following:

<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <router-link to="/about">About</router-link>
    <button v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>
    <router-view/>
    <app-cat-log-home msg="posts"/>   
  </div>
</template>

<script>
import AppCatLogHome from './components/AppCatLogHome.vue'


export default {
  name: 'App',
  components: {  
    AppCatLogHome
  },
   data: function () {
    return {
      authenticated: false
    }
  },
  created () {
    this.isAuthenticated()
  },
  watch: {
    // Everytime the route changes, check for auth status
    '$route': 'isAuthenticated'
  },
  methods: {
    async isAuthenticated () {
      this.authenticated = await this.$auth.isAuthenticated()
    },
    login () {
      this.$auth.loginRedirect('/')
    },
    async logout () {
      await this.$auth.logout()
      await this.isAuthenticated()

      // Navigate back to home
      this.$router.push({ path: '/' })
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

My About.vue component contains:

<template>
  <div id="about">
    <p>Hello this is the About.vue page</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Answer 1

The <app-cat-log-home> component is in your main view in App.vue (where the root <router-view> lives), so the component would be shown in all views.

You could address this by creating a "Home" view and moving <app-cat-log-home> into that view:

<!-- Home.vue -->
<template>
  <div>
    <app-cat-log-home msg="posts"/>   
  </div>
</template>

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/" tag="button" id='home-button'> Home </router-link>
    <router-link to="/about">About</router-link>
    <button v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </button>
    <button v-else v-on:click='login' id='login-button'> Login </button>

    <router-view/>

    <!-- Moved into Home.vue -->
    <!-- <app-cat-log-home msg="posts"/> -->
  </div>
</template>

Then, setup the default route for Home :

// main.js
import Home from '@/views/Home.vue'

const router = new Vuex.Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    //...
  ]
})