时间戳

首页 > 解决方案 > 多布局 Laravel 和 Vuejs

javascript - 多布局 Laravel 和 Vuejs

问题描述

当我只使用 laravel 时，很容易创建一个具有 2 种不同设计的站点，例如使用 AdminLte https://adminlte.io/themes/AdminLTE/index.html的管理面板 和使用此设计的主站点http://venoxis .epizy.com/project/

使用刀片很容易，我创建了一个名为 (admin) 的文件夹，其中包含文件（layout.blade.php、index.blade.php ..etc）该文件夹内的所有文件都从layout.blade.php扩展：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>
    <div id="app">
        @include('layouts.navbar');
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    @yield('scripts')
</body>
</html>

所以现在我已经准备好管理面板布局，每个页面都有自己的标题（样式和标题）、脚本和内容

现在我正在使用 laravel 和 vuejs 制作单页应用程序，我该怎么做？我制作了App.vue

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "App"
    }
</script>

<style scoped>

</style>

应用程序.js

require('./bootstrap');
import Vue from 'vue';
import router from './router';
import App from './components/App';
import BootstrapVue from 'bootstrap-vue';
import ExampleComponent from "./components/ExampleComponent";
import Login from "./components/Login";
import Dashboard from "./components/admin/Dashboard";

const routes = [
        {path: '/', component: ExampleComponent},
        {path:'/login', component: Login},
        {path:'/admin', component: Dashboard}
        ]

const router = new VueRouter({
    routes,
    mode: 'history',
});

Vue.use(BootstrapVue);

const app = new Vue({
    el: '#app',
    components: {
        App
    },
    router,
});

标签： javascriptphplaravelvue.jssingle-page-application

解决方案

推荐阅读