vue router路由懒加载

Vue Router支持使用路由懒加载来优化应用程序的性能。路由懒加载可以将页面组件按需加载，而不是在初始加载时一次性加载所有组件。这样可以减少初始加载时间，并在用户导航到相应路由时动态加载所需的组件。 要实现路由懒加载，你可以使用动态导入（Dynamic Import）的语法，结合Webpack或者Babel插件来实现。下面是一个示例： ```javascript 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会自动异步加载相应的组件，并在加载完成后渲染页面。 希望这个示例对你有帮助！如果还有其他问题，请随时提问。