Vue.js 3 - 尝试构建具有 2 个布局的系统答案

【问题标题】：Vue.js 3 - Trying to build a system with 2 layoutsVue.js 3 - 尝试构建具有 2 个布局的系统
【发布时间】：2021-03-05 04:42:18
【问题描述】：

我是vue.js的初学者（三）

我尝试构建一个具有 2 种布局的系统：

1 表示已连接的用户
1 表示未连接的用户

在我的 router/index.js 中，我为每个路由添加了一个元数据：

 const routes = [
  {
    path: '/',
    name: 'Home',
    meta: { layout: 'layout-connected' },
    component: Home
  },
  {
    path: '/myspace',
    name: 'MySpace',
    meta: { auth: true },
    component: MySpace
  }
]

在我的 App.vue 中，我决定使用哪个布局，像 （参见 ":is="layout"）：

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script>
const defaultLayout = 'layout-not-connected'

export default {
  computed: {
    layout () {
      console.log(this.$route.meta.layout)
      return (this.$route.meta.layout || defaultLayout)
    }
  },

至少，在我的布局中，我有：

<template>
  <div class="container-fluid">
    <div class="row essai">
      <h1>layout non connected</h1>
      <slot />
    </div>
  </div>
</template>

当我 console.log 应用哪个路由时，它工作正常：我在控制台中有正确的布局。

但我从来没有看到布局（例如标签）。只有组件。

我是否理解这个概念？我的错误可能是什么？

谢谢

【问题讨论】：

标签： vue.js vue-component vue-router vuejs3 vue-router4

【解决方案1】：

布局是应该在 main.js 中使用全局注册的组件：

app.component('layout-name',theLayoutComponent)

或本地components 选项：

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script>
const defaultLayout = 'layout-not-connected'
import LayoutConnected from 'path/to/LayoutConnectedComponent'
import DefaultLayout from 'path/to/DefaultLayout Component'
export default {
 components:{
DefaultLayout,LayoutConnected
 },
  computed: {
    layout () {
      console.log(this.$route.meta.layout)
      return (this.$route.meta.layout || defaultLayout)
    }
  },

【讨论】：