1. 程式人生 > 實用技巧 >vue的路由懶載入

vue的路由懶載入

在router/index.js中,

{
path: "/company",
name: "company",
component: () => import("../views/company.vue") //路由懶載入
},
 1 import Vue from "vue";
 2 import VueRouter from "vue-router";
 3 import Home from "../views/Home.vue";
 4 
 5 Vue.use(VueRouter);
 6 
 7 const routes = [
 8   {
 9     path: "/",
10     redirect: "/home"
11 }, 12 { 13 path: "/home", 14 name: "home", 15 component: Home, 16 meta: { 17 footer: "transparent", 18 imgShow: false 19 } 20 }, 21 { 22 path: "/company", 23 name: "company", 24 component: () => import("../views/company.vue") //路由懶載入 25 }, 26 {
27 path: "/productList", 28 name: "productList", 29 component: () => import("../views/productList.vue") 30 }, 31 { 32 path: "/product/:id", 33 name: "product", 34 component: () => import("../views/product.vue") 35 }, 36 { 37 path: "/case", 38 name: "case", 39 component: () => import("../views/case.vue")
40 }, 41 { 42 path: "/newsList", 43 name: "newsList", 44 component: () => import("../views/newsList.vue") 45 }, 46 { 47 path: "/news/:id", 48 name: "news", 49 component: () => import("../views/news.vue") 50 }, 51 { 52 path: "/note", 53 name: "note", 54 component: () => import("../views/note.vue") 55 }, 56 { 57 path: "/concat", 58 name: "concat", 59 component: () => import("../views/concat.vue") 60 } 61 ]; 62 63 const router = new VueRouter({ 64 routes 65 }); 66 67 export default router;