vue 实现页面 懒加载

 

常规配置路由（非懒加载）：

1.导入对应页面文件

 

 

2.填写路由配置

 

 

 

 

 

实现懒加载方式：

1.不需要导入对应页面文件，如果需要懒加载，就不能导入，否则懒加载会无效，会变成常规加载方式。

 

2.直接填写路由配置即可！

 

 

 

 

浏览器查看效果：

 

 

 

　　　这里的 Test.js   名字 是刚刚在上面绿色注解里面填的内容 ，自己随意取名即可。

 

 

 

 

当点击该页面后才会进行加载，而不会在第一次进入网站时就一次性全部加载完成，如果是一次性全部加载完成，首次进入网页需要等待时间较长，影响用户体验。

 

 提示：当设置完懒加载后，首页进入还是把全部js都加载了，这些文件属于prefetch，也就是预读取，他的加载基本不会影响到当前页面的打开，而且在读取完成后，可以降低页面跳转的等待时间，是一个非常好的功能。

 

代码如下：

{
    path: '/test',
    name: 'Test',
    meta:{
      title:'测试'
    },
    component: () => import(/* webpackChunkName: "Test" */ '../views/Test.vue'),
  }