# vue之router路由最优美写法
# vue之router路由最优美写法,懒加载、打包代码分离。
# 一、基础写法,没有懒加载,打包分离代码
官方最基础的路由写法
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 二、路由懒加载,import()方法。(按需加载)
官方的一种按需加载的方法,点击的时候才会请求,减少首页加载时间。
import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = () => import('@/components/HelloWorld')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 三、vue的异步组件,require()方法。(按需加载)
vue的一种按需加载的方法,点击的时候才会请求,减少首页加载时间。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve),
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 四、vue的异步组件+webpack的ensure()方法。(按需加载+js打包分离)
vue的一种按需加载的方法,webpack的ensure()方法实现js打包分离,每个组件单独打包,加载的时候文件不会太大。
import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 五、最优官方,懒加载和打包分离代码。(【官方推荐】按需加载+js打包分离)
vue官方的一种方法,import()方法和增加webpackChunkName。 1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import 2.配置webpack,在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
留言须知
对此博客有任何疑问欢迎留言
留言建议留下你的qq号/昵称(输入qq号自动拉取昵称),方便及时收到博主回复
本站支持丰富的表情,满足你的个性需求
请不要评论违反中国法律的内容。