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

【问题标题】：Vue.js - How to add multiple layout in vuejs?Vue.js - 如何在 vuejs 中添加多个布局？
【发布时间】：2019-11-04 05:02:51
【问题描述】：

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

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

谢谢。

【问题讨论】：

在您的 admin.js 中，您错误地设置了孩子。路径应该是path: '/reports' 而不是path: '/admin-panel/reports'（除非你希望你像/admin-panel/admin-panel/reports 一样链接）。孩子们自动获得父前缀路径。 idk 如果它回答你的问题。我还是不明白你有什么问题。哪条路线不行？
但它仍然呈现用户的布局并且显示 URL 未定义
@elichen 从前端看到，当我点击“管理面板”按钮进入管理端时点击我将 url 从“localhost:8080/home”更改为“localhost: 8080/admin-panel/reports”并且在错误的路线上，我在我的 user.js 中使用此路径（{ path:'/*',redirect:"not-found"}）显示未找到消息
如果您在 user.js 中使用 ({ path: '/*',redirect:"not-found"})。在此之后它会破坏所有路由器。所以在此之后它永远不会到达路由器。换句话说，无法访问您的 admin.js 路由器。顺便说一句，在你的情况下，它应该是 localhost:8080/admin-panel/admin-panel/reports
@elichen 我已通过删除“管理面板”修复了 URL 问题。删除“未找到路径”后出现错误，在这里您可以看到tinyurl.com/y3lyyst6 使用前缀“http://”打开此链接

标签： javascript vue.js vue-router

【解决方案1】：

我以前玩过这个，我这样做的方式是让替代布局根据route meta field 切换...

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

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

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

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

【讨论】：