Vue Router实现路由懒加载

为了提高页面的加载速度，我们可以使用Vue Router的路由懒加载功能。路由懒加载是什么呢，路由懒加载就是只有当访问某个路由的时候再加载其相应的页面。

官方文档地址https://router.vuejs.org/guide/advanced/lazy-loading.html

 以前我写路由懒加载的时候是这样写的：

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [/*-----------------------------------------------前台------------------------------------------*/{path: '/',component: () => import('@/views/blog-front/layout/index.vue'),redirect: '/home',children: [{path: 'home',name: 'Home',component: () => import('@/views/blog-front/home/HomeView.vue')},{path: 'category',name: 'Category',component: () => import('@/views/blog-front/category/CategoryView.vue')},{path: 'tag',name: 'Tag',component: () => import('@/views/blog-front/tag/TagView.vue')},{path: 'time',name: 'Time',component: () => import('@/views/blog-front/time/TimeView.vue')},{path: 'about',name: 'About',component: () => import('@/views/blog-front/about/AboutMe.vue')}]},/*--------------------------------------后台---------------------------------------------------*/{path: '/login',name: 'Login',component: () => import('@/views/blog-admin/login/LoginView.vue')},{path: '/admin',component: () => import('@/views/blog-admin/layout/index.vue'),redirect: '/admin/adminHome',children: [{path: 'adminHome',name: 'AdminHome',component: () => import('@/views/blog-admin/home/HomeView.vue')},{path: 'adminArticle',name: 'AdminArticle',component: () => import('@/views/blog-admin/article/ArticleView.vue')},{path: 'adminCategory',name: 'AdminCategory',component: () => import('@/views/blog-admin/category/CategoryView.vue')},{path: 'adminTag',name: 'AdminTag',component: () => import('@/views/blog-admin/tag/TagView.vue')},{path: 'adminProfile',name: 'AdminProfile',component: () => import('@/views/blog-admin/admin/AdminProfile.vue')},{path: 'adminPassword',name: 'AdminPassword',component: () => import('@/views/blog-admin/admin/AdminPassword.vue')}]}]
})

 这样写也可以实现路由懒加载，但是这些路由看着不是很好看。

今天我在查阅官方文档的时候发现，路由懒加载也可以这样写，这样写更加美观：

就是首先用变量接受导入的组件地址，然后再路由里面使用。

const UserDetails = () => import('./views/UserDetails.vue')const router = createRouter({routes: [{ path: '/users/:id', component: UserDetails }]
})