vue-router路由懒加载
正常配置
import Vue from 'vue'import Router from 'router" title="vue-router">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
文件,在切到相应路由时动态加载这个文件。
参考
懒加载 · vue-router
vue-router路由懒加载(解决vue项目首次加载慢)
GitHub:mazeyqian
Blog:blog.mazey.net
正常配置
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
文件,在切到相应路由时动态加载这个文件。
参考
懒加载 · vue-router
vue-router路由懒加载(解决vue项目首次加载慢)
以上是 vue-router路由懒加载 的全部内容, 来源链接: utcz.com/z/379552.html