vue+webpack을 사용하여 비동기 로딩을 만드는 방법

이번에는 vue+webpack을 사용하여 비동기 로딩을 하는 방법과 vue+webpack을 사용하여 비동기 로딩을 할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

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

HTML

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

JS

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

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

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

ES6 사용 시 주의사항은 무엇인가요?

Vue를 사용하여 DIV 끌기 만들기

위 내용은 vue+webpack을 사용하여 비동기 로딩을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!