vue-router 路由懒加载

187 阅读1分钟
//router.js
const Home = () => import(/* webpackChunkName: "home" */ '@/pages/home')
const router = new Router({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
        from.path == '/c' ? next('/') : next()
      }
      //beforeEnter 在进入这个路由之前,先判断是从哪个路由跳转的
    }
  ]
})

// 骚操作
const views = view => {
  return () => import(/* webpackChunkName: "layout" */ `@/views/${view}`)
} // 路由按需加载
const router = new Router({
  routes: [
    {
      path: '/home',
      component: views('home')
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})
//package.json
"devDependencies":{
    //...
    "babel-plugin-syntax-dynamic-import": "^6.18.0"
    //...
}
  //.babelrc
  "plugins":["syntax-dynamic-import"]