vue-router中的导航路由有什么用？vue-router实现路由懒加载

vue-router中的导航路由有什么用？vue-router实现路由懒加载const router = new VueRouter({ routes: [ { path: '/index' component: index name:"index" } ] }) 第三步：在build/webpack.base.conf.js下的output属性，新增chunkFilename。output: { path: config.build.assetsRoot filename: '[name].js' //新增chunFilename属性 chunkFilename: '[name].js' publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath } 编辑器：

问题：vue-router实现动态加载路由组件（ 懒加载 ）

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

第一步：定义一个能够被 Webpack 自动代码分割的异步组件。

// 在src/router/index.js里面引入异步引入组件 const index = () => import('../page/list/index.vue');

第二步：在路由配置中什么都不需要改变，只需要像往常一样使用 index。

const router = new VueRouter({ routes: [ { path: '/index' component: index name:"index" } ] })

第三步：在build/webpack.base.conf.js下的output属性，新增chunkFilename。

output: { path: config.build.assetsRoot filename: '[name].js' //新增chunFilename属性 chunkFilename: '[name].js' publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }

编辑器：