Vue路由懒加载

来源：coderwhy老师
采用路由懒加载的方式有下方3种方式：

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 不是懒加载的写法
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懒加载的ES6写法
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    // 另一种写法，直接写（不推荐，不方便管理）
    //component: () => import('../components/Home')
    meta: {
      title: '首页'
    },
    children: [
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    beforeEnter: (to, from, next) => {
      // console.log('about beforeEnter');
      next()
    }
  },
  {
    path: '/user/:hzy', 
    //拼接用户id的属性（动态变化）如
    // http://localhost:8080/user/zhangsan
    // http://localhost:8080/user/lisi
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

构建项目后，一个组件对应一个文件。打包出来的js文件更小，用户在请求的时候效率更高。

来源：CSDN

作者：猫的尾巴有墨水

链接：https://blog.csdn.net/Xidian2850/article/details/103838020