I'm creating a vuejs app, in which I want to have two different layouts like one for user interface and other for the admin interface. In the user interface, I have a button named "Admin Panel" on click to this button want to go the admin side and render the new layout. So far I have done this as follows:

• I have created a container folder in my src to keep the layout files

  • UserPanel.vue
  • AdminPanel.vue

• And also a router folder to keep the route files

  • user.js
  • admin.js
  • index.js

###UserPanel.js###

<template>
  <v-app> 
    <h4>User Layout</h4>
    <router-view></router-view>
  </v-app>
</template>
<script>
export default {
}
</script>

###AdminPanel.js###

<template>
  <v-app> 
    <h4>Admin Layout</h4>
    <router-view></router-view>
  </v-app>
</template>

<script>
export default {
}
</script>

###user.js###

import UserPanel from 'Container/UserPanel';
const HomeV1 = () => import('Views/HomeV1');
const HomeV2 = () => import('Views/HomeV2');
const HomeV3 = () => import('Views/HomeV3');

export default{
  path: '/',
  ponent: UserPanel,
  redirect:'/home',
  children:[
    { 
        path: '/',               
        ponent: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home',               
        ponent: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home-two',               
        ponent: HomeV2 ,
        meta: {
            header: 2
        }
    },
    { 
        path: '/home-three',               
        ponent: HomeV3 ,
        meta: {
            header: 3
        }
    }
  ]
}

###admin.js###

import Admin from 'Container/Adminpanel.vue';
const Reports = () => import('Views/AdminPanel/Reports.vue');
const Invoice = () => import('Views/AdminPanel/Invoices.vue');
const AdminAccount = () => import('Views/AdminPanel/Account.vue');

export default {
  path: '/admin-panel',
  ponent: Admin,
  redirect:'/admin-panel/reports',
  children:[
    { 
        path: '/admin-panel/reports',  
        ponent: Reports, 
        name:'Reports'
    },
    { 
        path: '/admin-panel/invoices',  
        ponent: Invoice, 
        name:'Invoice'
    },
    { 
        path: '/admin-panel/products',  
        ponent: AdminProducts, 
        name:'AdminProducts'
    }
  ]
}

###index.js###

import Vue from 'vue'
import Router from 'vue-router'
import userRoutes from './user';
import adminRoutes from './admin';
Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    userRoutes,
    adminRoutes
  ]
})

Now only my user routing is working. To show the pages of admin I have to put its route in user.js and after that, it renders the user's layout not admin's layout.

Thank You.

I'm creating a vuejs app, in which I want to have two different layouts like one for user interface and other for the admin interface. In the user interface, I have a button named "Admin Panel" on click to this button want to go the admin side and render the new layout. So far I have done this as follows:

• I have created a container folder in my src to keep the layout files

  • UserPanel.vue
  • AdminPanel.vue

• And also a router folder to keep the route files

  • user.js
  • admin.js
  • index.js

###UserPanel.js###

<template>
  <v-app> 
    <h4>User Layout</h4>
    <router-view></router-view>
  </v-app>
</template>
<script>
export default {
}
</script>

###AdminPanel.js###

<template>
  <v-app> 
    <h4>Admin Layout</h4>
    <router-view></router-view>
  </v-app>
</template>

<script>
export default {
}
</script>

###user.js###

import UserPanel from 'Container/UserPanel';
const HomeV1 = () => import('Views/HomeV1');
const HomeV2 = () => import('Views/HomeV2');
const HomeV3 = () => import('Views/HomeV3');

export default{
  path: '/',
  ponent: UserPanel,
  redirect:'/home',
  children:[
    { 
        path: '/',               
        ponent: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home',               
        ponent: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home-two',               
        ponent: HomeV2 ,
        meta: {
            header: 2
        }
    },
    { 
        path: '/home-three',               
        ponent: HomeV3 ,
        meta: {
            header: 3
        }
    }
  ]
}

###admin.js###

import Admin from 'Container/Adminpanel.vue';
const Reports = () => import('Views/AdminPanel/Reports.vue');
const Invoice = () => import('Views/AdminPanel/Invoices.vue');
const AdminAccount = () => import('Views/AdminPanel/Account.vue');

export default {
  path: '/admin-panel',
  ponent: Admin,
  redirect:'/admin-panel/reports',
  children:[
    { 
        path: '/admin-panel/reports',  
        ponent: Reports, 
        name:'Reports'
    },
    { 
        path: '/admin-panel/invoices',  
        ponent: Invoice, 
        name:'Invoice'
    },
    { 
        path: '/admin-panel/products',  
        ponent: AdminProducts, 
        name:'AdminProducts'
    }
  ]
}

###index.js###

import Vue from 'vue'
import Router from 'vue-router'
import userRoutes from './user';
import adminRoutes from './admin';
Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    userRoutes,
    adminRoutes
  ]
})

Now only my user routing is working. To show the pages of admin I have to put its route in user.js and after that, it renders the user's layout not admin's layout.

Thank You.

• javascript
• vue.js
• vue-router

• in your admin.js you set the children wrong. the path sholud be path: '/reports' not path: '/admin-panel/reports' (unless your want you link like /admin-panel/admin-panel/reports). the children get the parent prefix path auto. idk if its answer your question. i still dont understand what the problem you have. which route doesn't work? – eli chen Commented Jun 21, 2019 at 11:04
• but it still renders the user's layout and show URL is not defined – shashi verma Commented Jun 21, 2019 at 11:10
• @elichen see, from front-end when I click on "admin panel" button to go on the admin side here on clicking im changing the url from "localhost:8080/home" to "localhost:8080/admin-panel/reports" and on wrong route i'm showing a not found message using this path ({ path: '/*',redirect:"not-found"}) in my user.js – shashi verma Commented Jun 21, 2019 at 11:18
• if you use ({ path: '/*',redirect:"not-found"}) in your user.js. its break all the routers after this . so its never reach the routers after this. in other words, your admin.js routers cannot be reached. and btw in your case its sholud be localhost:8080/admin-panel/admin-panel/reports – eli chen Commented Jun 21, 2019 at 11:27
• @elichen I have fixed the URL issue by removing "admin-panel". After removing the "not found path" I am getting an error , here you can see tinyurl./y3lyyst6 open this link by using prefix "http://" – shashi verma Commented Jun 21, 2019 at 11:39

3 Answers 3

Put attribute meta in the route like this:

const routes = [
  {
    path: '/admin',
    name: 'admin',
    meta: { layout: 'LayoutAdmin' },
    ponent: Dashboard,
  },

and in App.vue you can render depends of this condition this.$route.meta.layout here an example:

<template>
  <div id="app">
    <notifications width="400px" />
    <LayoutAdmin v-if="this.$route.meta.layout">
      <router-view class="content" />
    </LayoutAdmin>
    <LayoutDefault v-else :links="links" :headerButtons="headerButtons">
      <router-view class="content" />
    </LayoutDefault>
  </div>
</template>

I have played around with this before and the way I did it was to have alternative layouts that switch depending on a route meta field...

So when you define a route, you can add a meta field:

path: '/admin-panel/reports',  
        ponent: Reports, 
        name:'Reports',
        meta: { template: 'admin' }

Then you need to check routes as they change. The easiest way to do this is in a global navigation guard (like the example has on their page). If it detects it's an admin page, it changes a Vuex property which will then switch which template you're using.

I will say that in the end I stopped using this method and wrapped all of my pages with wrapper ponents (admin/user/etc) so I could control everything from Vue itself. This was mainly due to Vue Router's limitations around waiting for a user to be authenticated though so that may not be an issue for you.

Another way is:

<template>
  <div class="container">

    <div >
      <div id="AdminTemplate" v-if="this.$route.meta.layout == 'AdminTemplate'">
        <router-view />
      </div>
    <div id="NormalTemplate" v-else>
        <router-view />
    </div>
  
  </div>

</template>
<script>
export default {
  data() {
    return {
      
    };
  },
};
</script>

And in the router

{
    path: "/admin",
    name: "AdminVue",
    ponent: AdminVue,
    meta: { layout: 'AdminTemplate' },
  }