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
    },
  ]
})

你可能感兴趣的:(vue(路由懒加载))