vue+webpack으로 비동기 로딩을 활성화하는 방법은 무엇입니까?

이번에는 vue+webpack을 활성화하여 비동기 로딩을 구현하는 데 사용할 수 있는 방법과 vue+webpack을 활성화하여 비동기 로딩을 구현하는 데 어떤 주의사항이 있는지 소개하겠습니다. 다음은 실제 사례입니다. 바라보다.

1. 첫 번째 예

const Home = resolve => {
  import("@/components/home/home.vue").then( module => {
      resolve(module)
  }
}

참고: (위에서 가져올 때 접미사를 쓸 필요가 없습니다.)

export default [{
  path: '/home',
  name:'home',
  component: Home,
  meta: {
    requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示
  },
}]

2. 두 번째 예

const router = new Router({
  routes: [
    {
       path: '/home',
       component: (resolve)=> {
         require(['../components/home/home'], resolve) // 省去了在上面去import引入
       }
     }
  ]
})

3. 이것도 권장 사항입니다.

// r就是resolve// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 
const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home');
const router = new Router({
  routes: [
    {
     path: '/home/home',
     component: Home,
     name: 'home' ,
    }
  ]
})

비동기 컴포넌트 로딩을 구현하기 위한 vue+webpack 코드를 소개하겠습니다. 구체적인 코드는 다음과 같습니다.

HTML

<input type="button" @click="showchild" value="show"> //点击按钮后，show为真,先获取child组件，再渲染p内容 
<p id="contain" v-if="show">
  <child></child>
</p>

JS

data () {
  return {
    msg: 'Welcome to Your Vue.js App',
    show:false
  }
},
methods: {
  showchild:function(){
    this.show=true;
  }
},
components: {
  'child': function(resolve) {
    require(['./components/child.vue'], resolve);
  }
}

참고: 비동기 컴포넌트를 로딩할 때 무시하지 마세요. 구성 요소 이름 뒤의 .vue. 이 예는 좀 더 직관적이어야 합니다. 버튼을 클릭하면 show 변수의 Boolean 값이 true로 변경됩니다. child.vue는 비동기 컴포넌트이므로 먼저 ajax를 통해 컴포넌트를 가져온 후 렌더링합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue 프로젝트에서 vue-i18n 및 element-ui의 국제 개발을 구현하는 방법

주의해야 할 vue 구성 요소 사용 세부 사항

위 내용은 vue+webpack으로 비동기 로딩을 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!