vue路由按需加载

在vue中路由过多的话会让用户体验变得极差,加载时时间过长,使用这种方式配置的话会按需加载,以此提高性能

const test1 = ()=>import('@/components/test1.vue') 
const test2 = ()=>import('@/components/test2.vue')

//指定了相同的webpackChunkName,会合并打包成y一个js文件,在路径之前加   /* webpackChunkName:'grounpTest' */
const test3 = ()=>import(/* webpackChunkName:'grounpTest' */ '@/components/test3.vue') 
const test4 = ()=>import(/* webpackChunkName:'grounpTest' */ '@/components/test4.vue')

const router = new VueRouter({
    routes: [
        { path: '/test1', component: test1 },
        { path: '/test2', component: test2 },
        { path: '/test3', component: test3 },
        { path: '/test4', component: test4 }
    ]
 })
### Vue3 中路由按需加载的实现 在 Vue3 中,通过结合 Webpack 的 `import()` 函数可以轻松实现组件的懒加载。这种方式不仅提高了初始加载速度,还优化了应用程序的整体性能。 对于 Vue Router 来说,在定义路由配置时可以直接返回一个调用了 `import()` 方法的对象作为组件引入方式[^2]: ```javascript const routes = [ { path: '/foo', component: () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') }, { path: '/bar', component: () => import(/* webpackChunkName: "group-bar" */ './Bar.vue') } ]; ``` 上述代码展示了如何利用 ES6 模块动态导入语法来指定路径对应的组件。当用户导航到特定 URL 地址时才会触发相应模块的实际下载与实例化过程,从而达到按需加载的效果。 另外值得注意的是,如果希望进一步提升用户体验,则可以在异步组件加载期间展示进度条或其他提示信息给访客知道当前正处于等待状态中[^4]。这通常涉及到监听全局前置守卫以及设置 `$loadingRouteData` 变量等操作。 #### 使用 NProgress 展示加载进度条的例子 安装依赖库: ```bash npm install nprogress --save ``` 修改 main.js 文件: ```javascript // 导入NProgress包并初始化样式表 import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; ... router.beforeEach((to, from, next) => { // 开始进度条动画 NProgress.start(); next(); }); router.afterEach(() => { // 结束进度条动画 (完成) NProgress.done(); }); ``` 以上就是关于 Vue3 下基于 Vue Router 进行按需加载的一些基本概念和技术要点介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值