前言
咱们在用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 也是一样的情况
- 可能不是特别完美,但是可以方便简洁,各种类型的都可以配置