Laravel UI中构建Vue固定布局：侧边栏、页脚与路由视图实现

方法一：创建Vue主布局组件（推荐） #

这种方式更符合SPA开发模式，把布局逻辑完全放在Vue体系内，便于后续扩展维护。

1. 新建全局布局组件 Layout.vue #

在 resources/js/components/ 目录下创建 Layout.vue，整合侧边栏、页脚和路由视图：

<template>
  <div class="app-layout">
    <!-- 固定侧边栏 -->
    <Sidebar />
    
    <!-- 主内容区域（路由视图容器） -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- 固定页脚 -->
    <footer class="app-footer">
      这里是页脚内容
    </footer>
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue'

export default {
  components: {
    Sidebar
  }
}
</script>

<style scoped>
.app-layout {
  display: grid;
  grid-template-areas: 
    "sidebar main"
    "sidebar footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

Sidebar {
  grid-area: sidebar;
  position: fixed;
  width: 250px;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 1rem;
}

.main-content {
  grid-area: main;
  margin-left: 250px;
  padding: 2rem;
}

.app-footer {
  grid-area: footer;
  margin-left: 250px;
  padding: 1rem;
  background-color: #eee;
  border-top: 1px solid #ddd;
}
</style>

2. 修改 app.js 挂载布局组件 #

把原来的空根组件替换为刚创建的布局组件：

require('./bootstrap')

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

createApp(Layout).use(router).mount('#app')

3. 简化 home.blade.php #

不需要在blade模板中直接引入Vue组件，保持现有结构即可，Vue会自动接管#app区域渲染完整布局：

<!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"></div>    
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

方法二：直接在Blade中引入Vue组件（不推荐） #

如果一定要在服务端模板中引入Vue组件，需要先全局注册组件再使用：

1. 在 app.js 全局注册Sidebar #

require('./bootstrap')

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

const app = createApp({})
app.component('sidebar', Sidebar) // 全局注册组件
app.use(router).mount('#app')

2. 修改 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">
        <sidebar></sidebar>
        <router-view />
        <footer class="app-footer">这里是页脚</footer>
    </div>    
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

3. 添加布局样式（在 app.css 中） #

#app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

sidebar {
  position: fixed;
  width: 250px;
  height: 100vh;
  background: #f5f5f5;
}

router-view {
  grid-column: 2;
  padding: 2rem;
}

.app-footer {
  grid-column: 2;
  padding: 1rem;
  background: #eee;
  border-top: 1px solid #ddd;
  margin-top: auto;
}

最后一步 #

执行 npm run dev 重新编译前端资源，让所有修改生效。

内容的提问来源于stack exchange，提问作者user16806454