Vue.js -如何在vuejs中添加多个布局？
Vue.js -如何在vuejs中添加多个布局？
提问于 2019-06-21 10:40:49
我正在创建一个vuejs应用程序，其中我希望有两个不同的布局，一个用于用户界面，另一个用于管理界面。在用户界面中，我有一个名为“管理面板”的按钮，点击这个按钮想要进入管理端并呈现新的布局。到目前为止，我所做的工作如下：
- 我在src中创建了一个容器文件夹来保存布局文件。
- UserPanel.vue
- AdminPanel.vue- 还有一个路由器文件夹来保存路由文件。
- user.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中，然后它会呈现用户的布局，而不是管理员的布局。
谢谢。
回答 2
Stack Overflow用户
发布于 2022-03-11 23:45:52
在路由中放置属性元，如下所示：
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>Stack Overflow用户
发布于 2019-06-21 14:02:14
我曾经玩过这个，我的方式是有选择的布局，切换依赖于一个路由元场.
因此，在定义路由时，可以添加一个元字段：
path: '/admin-panel/reports',
component: Reports,
name:'Reports',
meta: { template: 'admin' }然后，你需要检查路线，因为他们改变。最简单的方法是在全局导航保护(如他们的页面上的例子)。如果它检测到它是一个管理页面，它会更改Vuex属性，然后切换您使用的模板。
我要说的是，最后我不再使用这个方法，而是用包装器组件(admin/user/etc)包装我的所有页面，这样我就可以控制Vue本身的所有内容。这主要是因为Vue路由器在等待用户通过身份验证时受到限制，所以这对您来说可能不是问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56701836
复制相关文章
相似问题
腾讯云开发者
