[Vuejs]-How to show components on the right side of Vuetify's NavigationDrawer using VueRouter?

by

0👍

You can try putting router-view in App.vue

<template>
  <v-app>
    <v-navigation-drawer v-if="isLoggedIn">
      ...
    </v-navigation-drawer>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
export default {
  mounted () {
    if (this.isLoggedIn) {
      // this is better to have guard in router
      // https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
      this.$router.push('/login')
    }
  },
}
</script>

Note:

  • You don’t need to import Login into App.vue. You should use router-view to render it.
  • The router guard is better doing in another place, like router/index.js. You can find an example here

Leave a comment