Vue 필요 에 따라 불 러 오 는 구체 적 인 실현
패키지 구축 애플 리 케 이 션 을 만 들 때 자 바스 크 립 트 패키지 가 매우 커 져 페이지 로 딩 에 영향 을 줍 니 다.만약 에 우리 가 서로 다른 경로 에 대응 하 는 구성 요 소 를 서로 다른 코드 블록 으로 나 누고 경로 가 방문 되 었 을 때 대응 하 는 구성 요 소 를 불 러 올 수 있다 면 응,그러면 더욱 효율 적 이다.
장면
xxx 프로젝트 는 단일 페이지 로 서 구성 요소 화 된 개발 모델 을 사용 하여 첫 페이지 를 시작 할 때마다 모든 구성 요 소 를 불 러 옵 니 다.그러나 이 때 는 첫 페이지 에 만 방 문 했 을 뿐 대량의 구성 요소 가 오염 되 어 불 러 오 는 상황 을 초래 합 니 다.
목적.
현재 페이지 에 접근 할 때 만 해당 구성 요 소 를 불 러 옵 니 다.페이지 구성 요소 가 모두 불 러 오지 않도록 합 니 다.(필요 에 따라 불 러 오기)
이루어지다
app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'
// ， 。
const Routers = [
{
path: '/', //
component: resolve => require(['../components/member/index], resolve) //
},
{
path: '/login',
component: resolve => require(['../components/member/login'], resolve)
}
]
const RouterConfig = {
routes: Routers
}
// router ， 。
const router = new VueRouter(RouterConfig);
// 。
new Vue({
el:'#app',
router,
// h createElement 。
render: h =>(App)
})
require()함수 가 두 개의 인 자 를 받 아들 입 니 다.첫 번 째 매개 변 수 는 하나의 배열 로 의존 하 는 모듈 을 표시 합 니 다.예 를 들 어['moduleA','moduleB'],두 번 째 매개 변 수 는 반전 함수 입 니 다.앞에서 지정 한 모듈 이 모두 불 러 오 면 호출 됩 니 다.불 러 온 모듈 은 매개 변수 형식 으로 이 함수 에 들 어가 리 셋 함수 내부 에서 이 모듈 을 사용 합 니 다.
예제 코드 에 서 는 비동기 방식 으로 구성 요 소 를 불 러 옵 니 다.그 중에서 require 함 수 는 렌 더 링 할 구성 요 소 를 비동기 로 도입 하고 resolve 는 비동기 렌 더 링 구성 요 소 를 책임 집 니 다.
babel-poly fill:Promise 를 코드 로 컴 파일 합 니 다.
npm install --save babel-polyfill
npm install --save es6-promise-polyfill이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
