VUE自定义路由配置

• 普通写法

  import Vue from 'vue'
  import Router from 'vue-router'
  import Index from "@/components/index"
  
  Vue.use(Router)
  
  const router = new Router({
      routes: [
        {
          path: '/',
          name: 'Index'
          component: Index,
        }
      ]
  })
  

• 优化写法

  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  const Index = (resolve) => {
    import('@/components/index').then((module) => {
          resolve(module);
      });
  };
  const router = new Router({
  routes: [
    {
        path: '/',
        name: 'Index'
        component: Index,
    }
   ]
  })
  

• 按需引入、懒加载写法（推荐）

  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  export default new Router({
    mode: "history",
    routes: [
      {
          path: '/',
          name: 'Index',
          component: resolve => require(['@/components/Index'], resolve),
      }
    ]
  })
  
  //或者
  
  const TalentDetail = resolve => require(['@/components/Index'], resolve);
  
  export default new Router({
    mode: "history",
    routes: [
      {
          path: '/',
          name: 'Index',
          component: resolve => require(['@/components/Index'], resolve),
      }
    ]
  })
  

• 包含子路由写法：实例

   // 求职招聘 首页
  {
  path: '/JobRecruitmentIndex',
  meta: {
    title: "求职招聘"
  },
  component: JobRecruitmentIndex,
  children: [{
    {
      // 找工作
      path: 'JobHunting',
      name: 'JobHunting',
      component: JobHunting
    },
    {
      // 找人才
      path: 'FindTalent',
      name: 'FindTalent',
      meta: {
        title: "找人才"
      },
      component: FindTalent
    }
    ]
  }