在使用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
},
]
})
网友评论