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