[Vuejs]-Checking the state of the route in the App component

by

0👍

✅

It really depends on how much different your layouts are.

  • You can use more robust (and complicated) system as in vue-enterprise-boilerplate where each view (sample) chooses its own layout (sample)
  • you can use Vue’s dynamic component in App.vue template (see sample below)
  • if layouts are very similar and all you need is just different navigation (for example), you can use Vue-router’s Named Views
  1. Extract layout template into its own component (will be very similar to vue-enterprise-boilerplate sample)
  2. Create component with layout for Admin
  3. Use following template in App.vue :
<template>
  <component :is="getLayoutComponent()">
    <router-view />
  </component>
</template>
<script>
export default {
  computed: {
    getLayoutComponent() {
      // ...logic to choose different layout component base on path
    }
  }
}
</script>

Leave a comment