vue(路由懒加载)

在使用vue路由的时候,为了防止一次加载所有的路由,出现首屏加载过多资源导致的慢的表现。这是一种很糟糕的用户体验,所有使用路由的懒加载,来实现当进入当前路由时加载当前路由的内容。

该方法是基于webpack的,项目中使用的是下面版本:

 "webpack": "^3.6.0",

在vue的路由配置文件中可以这么使用:

const NoPage = () => import('../basic/404page/404page.vue')
const Home = () => import('../components/Home/Home.vue')
const SmartAlbums = () => import('../components/SmartAlbums/SmartAlbums')

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/SmartAlbums'
    },{
      path:'/Home',
      component:Home,
      children:[{
          path: '/SmartAlbums',
          name: 'SmartAlbums',
          component: SmartAlbums,
          beforeEnter: (to, from, next) => {
            store.commit('SET_ROUTE_ACTIVE' , 0)
            next()
          }
        }]
    },{
      path: '*',
      component:NoPage
    },
  ]
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容