您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 路由懒加载

《和小米一起学Vue.js》— 路由懒加载

[ 孤狼 | 2023-01-09 11:18:07 | Vue | 1226°C | 0条评论 ]

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。

Vue Router 支持开箱即用的【动态导入】,这意味着你可以用动态导入代替静态导入:

const UserView=()=> import('../views/User.vue')

const routes = [
{
path: '/about',
name: 'about',
//动态导入(默认方式)
component: () => import('../views/AboutView.vue')
},
{
path: '/user/:uid', //对应的网址路径
name: 'user', //对应的路由名称
//动态导入(推荐方式)
component: UserView
}
]

TIP:使用动态导入的时候,就无需在文件开头使用 import 静态导入了。


代码下载

下载地址:  密码:8zxs




转载请注明出处:http://gl.paea.cn/n.php?n=201
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索