Vue.js - Как добавить несколько макетов в Vuejs? - PullRequest
Новая
       14

Vue.js - Как добавить несколько макетов в Vuejs?

2 голосов
/ 21 июня 2019

Я создаю приложение vuejs, в котором я хочу иметь два разных макета, например, один для пользовательского интерфейса и другой для интерфейса администратора. В пользовательском интерфейсе у меня есть кнопка с именем «Панель администратора», по нажатию на эту кнопку хочу перейти на сторону администратора и отобразить новый макет. Пока что я сделал это следующим образом:

  • Я создал папку контейнера в моем src для хранения файлов макета

    • Userpanel.vue
    • Adminpanel.vue

  • А также папка маршрутизатора для хранения файлов маршрутов

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

Userpanle.js 

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

Adminpanle.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: '/',
component: UserPanel,
redirect:'/home',
children:[
    { 
        path: '/',               
        component: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home',               
        component: HomeV1 ,
        meta: {
            header: 1
         }
    },
    { 
        path: '/home-two',               
        component: HomeV2 ,
        meta: {
            header: 2
        }
    },
    { 
        path: '/home-three',               
        component: 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',
component: Admin,
redirect:'/admin-panel/reports',
children:[
    { 
        path: '/admin-panel/reports',  
        component: Reports, 
        name:'Reports'
    },
    { 
        path: '/admin-panel/invoices',  
        component: Invoice, 
        name:'Invoice'
    },
    { 
        path: '/admin-panel/products',  
        component: 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
]
})

Теперь работает только моя пользовательская маршрутизация. Чтобы показать страницы администратора, я должен поместить его маршрут в user.js, и после этого он отображает пользовательский макет, а не админский макет.

Спасибо.

1 Ответ

1 голос
/ 21 июня 2019

Я поиграл с этим раньше, и у меня было альтернативное расположение, которое переключалось в зависимости от метаполя route ...

Поэтому, когда вы определяете маршрут, вы можете добавить мета-поле: 

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

Тогда вам нужно проверять маршруты по мере их изменения. Самый простой способ сделать это - использовать глобальную навигационную охрану (как в примере на их странице). Если он обнаруживает, что это страница администратора, он изменяет свойство Vuex, которое затем переключает используемый вами шаблон.

Я скажу, что в конце концов я перестал использовать этот метод и обернул все свои страницы компонентами-обертками (admin / user / etc), чтобы я мог контролировать все из самого Vue. Это было связано главным образом с ограничениями Vue Router, связанными с ожиданием аутентификации пользователя, хотя это может быть проблемой для вас.

...