vue 路由懒加载 resolve vue-router配置

最新推荐文章于 2024-05-17 14:04:47 发布

桂如

最新推荐文章于 2024-05-17 14:04:47 发布

阅读量8k

点赞数 2

本文链接：https://blog.csdn.net/qq_35285627/article/details/80804206

版权

使用方法

component:resolve => require(['@/pages/About'],resolve)

懒加载

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:resolve => require(['@/pages/About'],resolve)
    },
    {
      path: '/index',
      name: 'Index',
      component:resolve => require(['@/pages/Index'],resolve)
    },
    {
      path: '/product',
      name: 'Product',
      component:resolve => require(['@/pages/Product'],resolve)
    }
  ]
})

非懒加载

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/pages/About'
import Index from '@/pages/Index'
import Product from '@/pages/Product'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/index'
    },
    {
      path: '/about',
      name: 'About',
      component:About
    },
    {
      path: '/index',
      name: 'Index',
      component:Index
    },
    {
      path: '/product',
      name: 'Product',
      component:Product
    }
  ]
})