美文网首页
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-01

    vue+webpack 优化 一.异步加载 1.异步加载组件,其实就是组件懒加载。可以理解为:当我需要使用组件的时...

  • vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况...

  • vue项目实现按需加载的方式

    ,1. vue异步组件技术vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况...

  • vue.js v1 懒加载实践

    vue指南说,可以异步加载component vue指南 => 异步加载组件 注意 下面的内容假设你已经学会: w...

  • vue项目按需加载

    原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载。 1、vue异步组件...

  • vue路由懒加载及组件懒加载

    路由 和 组件 的常用两种懒加载方式:1、vue异步组件实现路由懒加载component:resolve=>(['...

  • vue提升性能的几种简单方法

    1.vue异步组件实现懒加载方法如下:component:resolve=>(require([‘需要加载的路由的...

  • Vue路由异步组件

    vue异步组件和懒加载可以优化vue的性能 一、 原理 利用webpack对代码进行分割是懒加载的前提,懒加载就是...

  • component:(resolve) => require是什

    这是异步加载组件,当你访问 / ,才会加载 home.vue。 路由懒加载的一种写法 也可以用import vue...

  • Vue的异步组件

    异步组件,顾名思义,按需加载组件。 在vue的文档中,除了异步组件的高级使用方法外,介绍了三个异步组件的解决方案 ...

网友评论

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

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