-
普通写法
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 } ] }
网友评论