在laravel ui中创建vue布局

Question

I use Laravel 8 with laravel/ui 3.4 for front end.我使用 Laravel 8 和 laravel/ui 3.4 作为前端。 I want to create fixed sidebar, footer and an area for router-view.我想为路由器视图创建固定的侧边栏、页脚和区域。

routes/web.php路线/web.php

Route::view('/{any}', 'home')->where('any', '.*');

resources/home.blade.php资源/home.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div id="app">
        <router-view />
    </div>    
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

resouces/js/app.js资源/js/app.js

require('./bootstrap')

import { createApp } from 'vue'
import router from './router'

createApp({}).use(router).mount('#app')

resouces/js/router/index.js资源/js/路由器/index.js

import { createRouter, createWebHistory } from 'vue-router'    
import Shop from '../pages/Shop'

const routes = [
    {
        path: '/',
        name: 'shop',
        component: Shop
    }
]    
export default createRouter({
    history: createWebHistory(),
    routes
})

resouces/js/components/Sidebar.vue资源/js/components/Sidebar.vue

<template>
This is fixed sidebar. This includes dynamics content
</template>

How to include this sidebar in home.blade.php?如何在 home.blade.php 中包含这个侧边栏？ Or is there any way to create default Vue layout with child components?或者有什么方法可以使用子组件创建默认的 Vue 布局？

Answer 1

Till now I got way to solve half of my problem.到目前为止，我已经解决了一半的问题。 I create a sidebar at js/components/layouts/mainsidebar.vue我在js/components/layouts/mainsidebar.vue创建了一个侧边栏

js/app.js js/app.js

import mainsidebar from './components/layouts/mainsidebar.vue'
const app = createApp({})
app.component('mainsidebar', mainsidebar)

home.blade.php home.blade.php

<div id="app">
    <mainsidebar />
    <router-view />
</div>

But it shows only sidebar but not the router view.但它只显示侧边栏而不显示路由器视图。 The page view has only sidebar.页面视图只有侧边栏。

Did I import it wrongly?我是否错误地导入了它？

在laravel ui中创建vue布局

问题描述

1 个解决方案

解决方案1
0 2022-09-06 08:15:01

在laravel ui中创建vue布局

问题描述

1 个解决方案

解决方案1 0 2022-09-06 08:15:01

解决方案1
0 2022-09-06 08:15:01