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

Question

我正在创建一个 vuejs 应用程序，其中我想要两种不同的布局，例如一种用于用户界面，另一种用于管理界面。 在用户界面中，我有一个名为“管理面板”的按钮，单击此按钮想要进入管理端并呈现新布局。到目前为止，我已经这样做了：

• 我在我的src中创建了一个容器文件夹来保存布局文件

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

• 还有一个路由器文件夹来保存路由文件

  • 用户.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: '/',
  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

我之前已经尝试过这个方法，我的做法是根据 route 元字段...

切换不同的布局

所以当你定义路由时，你可以添加一个meta字段：

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

然后您需要检查路线的变化。最简单的方法是在全局导航防护中（就像其页面上的示例一样）。如果它检测到它是管理页面，它会更改 Vuex 属性，然后该属性将切换您正在使用的模板。

我会说，最终我停止使用这种方法，并用包装组件（管理员/用户/等）包装我的所有页面，这样我就可以从 Vue 本身控制一切。这主要是由于 Vue Router 在等待用户进行身份验证方面的限制，因此这对您来说可能不是问题。

Answer 3

另一种方法是：

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

在路由器中

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