vuerouter路由懒加载

Vue Router支持使用路由懒加载来优化应用程序的性能。路由懒加载可以将页面组件按需加载，而不是在初始加载时一次性加载所有组件。这样可以减少初始加载时间，并在用户导航到相应路由时动态加载所需的组件。

要实现路由懒加载，你可以使用动态导入（Dynamic Import）的语法，结合Webpack或者Babel插件来实现。下面是一个示例：

const Home = () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的示例中，`import`语句使用了注释`/* webpackChunkName: "home" */`来指定生成的代码块的名称。这样可以帮助Webpack将相关的组件打包到同一个代码块中，便于管理和优化。

当用户访问特定路由时，Vue Router会自动异步加载相应的组件，并在加载完成后渲染页面。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。