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

我正在创建一个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
]
})

现在只有我的用户路由有效。为了显示admin的页面，我必须将其路由放置在user.js中，然后，它呈现用户的布局而不是admin的布局。

谢谢。

最佳答案

我以前玩过这个游戏，我做的方法是根据route meta field切换其他布局...

因此，当您定义路线时，可以添加一个meta字段:

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

然后，您需要检查路线更改的情况。最简单的方法是在全局导航控件中(如示例在其页面上显示)。如果检测到它是管理页面，它将更改Vuex属性，该属性随后将切换您正在使用的模板。

我会说，最后我停止使用此方法，并使用包装器组件(admin / user / etc)包装了我的所有页面，以便可以控制Vue本身的所有内容。这主要是由于Vue Router在等待用户通过身份验证方面的限制，尽管这对您来说可能不是问题。

关于javascript - Vue.js-如何在vuejs中添加多个布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56701836/