vuejs: làm trang admin

Chào mọi người, em có làm 1 project vuejs. Cho em hỏi làm trang admin như thế nào ? Đây là code hiện tại của em: app.vue

<template>
  <div id="app">
    <tour-header></tour-header>
    <router-view></router-view>
    <tour-footer style="margin-top: 60px"></tour-footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>

route.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/destination',
    name: 'Destination',
    component: Destination
  },
  {
    path: '/tour-detail',
    name: 'TourDetail',
    component: TourDetail
  },
  {
    path: '/admin/login',
    name: 'AdminLogin',
    component: AdminLogin
  },
]

nếu như trên thì khi vào /admin/login thì sẽ có header, footer của giao diện người dùng.

Cái em đang muốn là người dùng có giao diện riêng, trang admin login thì ko có header footer, còn trang admin thì giao diện riêng. Vậy phải làm sao ạ.