vue-router路由懶載入
阿新 • • 發佈:2021-11-19
正常配置
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/pages/login'
import Capture from '@/components/pages/capture'
import List from '@/components/pages/list'
import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/capture',
name: 'Capture',
component: Capture
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: CaptureFail
}
]
})
懶載入配置
import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/components/pages/login'
// import Capture from '@/components/pages/capture'
// import List from '@/components/pages/list'
// import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: resolve => require(['@/components/pages/login'], resolve) // Login
},
{
path: '/capture',
name: 'Capture',
component: resolve => require(['@/components/pages/capture'], resolve) // Capture
},
{
path: '/list',
name: 'List',
component: resolve => require(['@/components/pages/list'], resolve) // List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: resolve => require(['@/components/pages/capture-fail'], resolve) // CaptureFail
}
]
})
說明
npm run build
後會新增路由數量相匹配的.js
檔案,在切到相應路由時動態載入這個檔案。
參考
GitHub:mazeyqianBlog:blog.mazey.net