Vue.js公共layout

发表于 更新于 分类于

Vue.js公共layout

很多网站侧边栏、头部、尾部都是基本固定不变的，我们可以把这些固定不变的东西写成一个layout，这样可以有效减少代码量，提高可读性，并充分利用Vue.js的组件化特性。

layout文件

其实layout就是一个组件，里面包含了页面固定不变的部分。首先在src目录下新建layouts目录，在layouts目录下新建文件Default.vue文件，在文件中写好布局，页面预留的可变区域位置用router-view代替。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- /src/layouts/Default.vue -->
<template>
  <div class="total">
    <Header/> 
    <div class="contents">
      <SideBar/>
      <div class="detail">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

引入layout

在main.js中引入layout，并注册组件

1
2
3
4
5
// /src/main.js
import { createApp } from 'vue' // Vue2中使用 import Vue from 'vue'
import DefaultLayout from './layouts/Default.vue'
const app = createApp(App); 
app.component("layout-default",DefaultLayout) // 这里要注意的是，在vue2中，不用createApp，直接用Vue.component；但是在vue3中，需要使用createApp创建Vue实例再注册组件

在路由中添加layout信息

需要在路由的index.js中添加layout信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// /src/router/index.js
let routes = [
  {
    path: '/',
    name: 'home',
    layout: "default", //在layout字段中填写使用的是什么layout
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/login',
    name: 'login',
    layout: "default",
    component: () => import('../views/login.vue')
  },
]

然后将layout信息添加进路由元信息

1
2
3
4
5
6
7
8
9
10
11
// /src/router/index.js
function addLayoutToRoute(route, parentLayout = "default") {
  route.meta = route.meta || {};
  route.meta.layout = route.layout || parentLayout;
  if (route.children) {
    route.children = route.children.map((childRoute) => addLayoutToRoute(childRoute, route.meta.layout));
  }
  return route;
}

routes = routes.map((route) => addLayoutToRoute(route));

配置App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div id="app">
    <component :is="layout">
      <router-view />
    </component>
  </div>
</template>

<script>
export default {
  computed: {
    layout() {
      return "layout-" + (this.$route.meta.layout || "default").toLowerCase(); //获取路由的layout信息
    },
  },
};
</script>

<style lang="less"></style>

完成

在layout中，使用的头部，尾部，侧边栏，都可以注册成组件，减少layout的代码量。