vue组件的路由懒加载

最新推荐文章于 2023-03-23 15:07:56 发布

全栈进阶中........

最新推荐文章于 2023-03-23 15:07:56 发布

阅读量120

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45581741/article/details/108883167

版权

vue组件的路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
// es6 不适用路由懒加载的写法
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld // es6 不适用路由懒加载的写法
    },
    {
      path: '/other',
      name: 'HelloWorld',
      component: resolve => require(['@/components/other'], resolve) // 路由懒加载的写法
    }
  ]
})
// 因为一般使用vue搭建的都是spa（单页面项目），但是呢因为在同一个页面的问题，那么当我们打开页面的时候，所有的组件样式这些都会去进行加载，那么这样就会造成卡顿，影响用户体验，然后路由懒加载就是来处理这个问题的，采用这种方式引入打包后，他会把路由要使用的组件拆分，然后当我们进去到路由所对应的页面的时候才会去加载和渲染，这样就极大的提升了我们用户的体验