vue-router 配置公共头部、尾部

前言

咱们在用vue开发项目的过程中，一定会遇到需要封装和配置公共部分，尤其是PC网站，头部、尾部、右侧等，肯定有需要多个页面用到的，但是也不可能每个页面挨个引入，一个关于vue-router的小技巧如下：

实现

一般的路由

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';

const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'LoginPage',
        meta: {
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@/pages/login.vue')
    },
    {
        path: '/home',
        name: 'IndexPage',
        meta: {
            title: '首页',
            keepAlive: true,
            requireAuth: true
        },
        component: () => import('@/pages/index.vue')
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

看上图都是通过 component 来引入页面，其实也是写为 components 这样就变成多个了：

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';

// @ts-ignore
const Header = () => import('@/layout/header.vue')

const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'LoginPage',
        meta: {
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@/pages/login.vue')
    },
    {
        path: '/home',
        name: 'IndexPage',
        meta: {
            title: '首页',
            keepAlive: true,
            requireAuth: true
        },
        components: {
            header: Header,
            default: () => import('@/pages/index.vue')
        }
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

而只需要在 App.vue 里有对应的key值就可以

  <KeepAlive>
    <RouterView name="header"></RouterView>
  </KeepAlive>
  <RouterView/>

小结

• KeepAlive 是 vue 的一个内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM
• 以上是 ts 的代码，js 也是一样的情况
• 可能不是特别完美，但是可以方便简洁，各种类型的都可以配置