美文网首页
vue 异步加载组件

vue 异步加载组件

作者: zy懒人漫游 | 来源:发表于2018-06-24 09:36 被阅读0次
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/home/Home'
    import City from '@/pages/city/City'
    import Detail from '@/pages/detail/Detail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [{
        path: '/',
        name: 'Home',
        component: Home
      }, {
        path: '/city',
        name: 'City',
        component: City
      }, {
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
      }],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    })
    

    通过箭头函数加import 可以实现异步加载组件功能,可以实现性能优化

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({
      mode: 'history',  
      routes: [
        {
          path: '/',
          name: 'Home',
          component: () => import('@/pages/home/Home')
        },
        {
          path: '/city',
          name: 'City',
          component: () => import('@/pages/city/City')
        },
        {
          path: '/detail/:id',
          name: 'Detail',
          component: () => import('@/pages/detail/Detail')
        }
      ],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0,y:0}
      }
    })
    
    

    相关文章

      网友评论

          本文标题:vue 异步加载组件

          本文链接:https://www.haomeiwen.com/subject/cssjyftx.html