Vue.js Vue3 子组件的不同模板

Posted 2023-02-22

【中文标题】Vue.js Vue3 子组件的不同模板

【英文标题】：Vue.js Vue3 different Templating with for sub components

【发布时间】：2021-08-15 09:06:55

【问题描述】：

我有一个 Vue 3 项目，

我的大部分组件都使用 App.vue 中的模板（我的理解是，这类似于 .net 核心中的“母版页”，其完整性继承自 App.vue 的样式和布局。就我而言， app.vue 将具有仪表板布局（顶部和侧面），然后我将在内容部分加载受限组件。

但是，我似乎无法弄清楚如何使面向公众的页面（例如登录和注册）根本不引用仪表板模板，因为它们没有登录，但仍然允许一些 Vue 功能。发布登录、返回错误等。如何根据角色或登录状态为不同用户拆分它们或为不同用户提供多个 Master App.vue 模板。

非常感谢您的帮助。

【问题讨论】：

你可以像我在这里github.com/boussadjra/vue3-tailwind2/blob/main/src/App.vue

那样根据当前路线做出不同的布局并渲染正确的布局

谢谢，我似乎是这个想法，只是计算方法中的一个小问题，我可以说是否登录（有一种方法来检查用户是否登录）作为回报“登录layout" 否则返回默认布局。

是的，您可以添加类似return this.userIsLoggedIn?'auth-layout':'default-layout'的条件

【参考方案1】：

在 App.vue 中你可以使用 vue js 内置的组件标签来渲染动态布局

<component :is="activeLayout"></component>

您可以将其绑定到计算属性并返回适当的组件以针对不同的场景进行绑定