Vue.js - 如何在vuejs中添加多個布局？

Question

我正在創建一個 vuejs 應用程序，我想在其中使用兩種不同的布局，一種用於用戶界面，另一種用於管理界面。 在用戶界面中，我有一個名為“Admin Panel”的按鈕，單擊此按鈕想要 go 管理端並呈現新布局。 到目前為止，我已經這樣做了如下：

• 我在我的 src 中創建了一個容器文件夾來保存布局文件

  • 用戶面板.vue
  • 管理面板.vue

• 還有一個路由器文件夾來保存路由文件

  • 用戶.js
  • 管理員.js
  • 索引.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: '/',
  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 中，然后，它呈現用戶的布局而不是管理員的布局。

謝謝你。

Answer 1

像這樣將屬性元放在路由中：

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

在 App.vue 中，您可以根據此條件渲染this.$route.meta.layout示例：

<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>

Answer 2

我之前玩過這個，我這樣做的方式是根據路由元字段切換替代布局......

所以當你定義一個路由時，你可以添加一個元字段：

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

然后，您需要在路線更改時檢查路線。 最簡單的方法是在全局導航守衛中（就像他們頁面上的例子一樣）。 如果它檢測到它是一個管理頁面，它會更改一個 Vuex 屬性，然后該屬性將切換您正在使用的模板。

我會說最后我停止使用這種方法並用包裝器組件（管理員/用戶/等）包裝我的所有頁面，這樣我就可以從 Vue 本身控制一切。 這主要是由於 Vue Router 在等待用戶通過身份驗證方面的限制，所以這對您來說可能不是問題。