Laravel vue 有两种不同的布局
Posted
技术标签:
【中文标题】Laravel vue 有两种不同的布局【英文标题】：Laravel vue with two different layout 【发布时间】：2020-05-05 11:41:39 【问题描述】：我可以在 laravel vue 组件中有不同的布局吗？
如果我们使用刀片，我们只需将@extends('layouts.app') 更改为@extends('layouts.custom')，然后您就有不同的设计，但它在 vuejs 中是如何工作的？
代码
这是我的App.vue文件，负责渲染所有页面的模板
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
//navbar
</nav>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside >
<h5>site_name</h5>
</el-aside>
<el-main>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<div>
<transition name="fade">\
//router which renders all components in this part
<router-view id="content" :key="$route.fullPath"></router-view>
</transition>
</div>
</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
这是我的布局刀片文件：
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content=" csrf_token() " />
<title> config('app.name', 'Laravel') </title>
<link href=" asset('css/app.css') " rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src=" asset('js/app.js') "></script>
<script>
window.default_locale = " config('app.locale') ";
window.fallback_locale = " config('app.fallback_locale') ";
</script>
</body>
</html>
基本上
aside部分在app.vue我只需要显示在管理部分而不是前端（对于用户）
有什么想法吗？
【问题讨论】：
【参考方案1】：已解决
我设法通过这篇文章here解决了我的问题。
【讨论】：
这是针对 vue.js 应用的。如果它 laravel vue ja 应用程序怎么办。 “在 laravl 项目内部”【参考方案2】：将它作为道具传递给您的组件 比如：
刀片文件：
@php
$isLoggedIn = Auth::check();
@endphp
<my-component :is-logged-in=" $isLoggedIn " </<my-component>
【讨论】：
这样普通用户也能看出来。这仅适用于管理面板部分，不适用于所有登录用户 即使我们将登录用户限制为管理员，这些管理员也会在管理面板和前端部分看到这个侧边栏（它只属于管理面板） 为什么不创建两个版本的 app.vue 呢？就像在你的刀片中那样，你只需设置一个条件，如果这是 URL，那么我将显示这个 app1.vue 或 app2.vue。等等这个办法。除非您已重定向到管理站点，否则前端用户甚至无法显示侧边栏 @Qonvex620 我的刀片文件只提供id="app" 如果我们想做出这样的条件，我们应该在app.vue 本身中制作它，不要让它重复，无论哪种方式都有未回答的问题：how to let router know which route should use which condition? 以上是关于Laravel vue 有两种不同的布局的主要内容，如果未能解决你的问题，请参考以下文章