Vue 경로 의 모듈 자동화 와 통합 로드 실현
왜 이렇게 나 눠 요?만약 에 큰 프로젝트 업무 가 매우 많 고 단순 한 단일 페이지 를 유지 하기 어렵다 면 우 리 는 이렇게 규범화 해 야 효율 이 높 을 수 있다.
모듈 자동화 와 통합 로드 의 장점:
프로젝트 파일 디 렉 터 리 및 폴 더 만 들 기
위의 요구 에 따라 src 폴 더 아래 components 폴 더 아래 모델 1 폴 더 를 만들어 기능 모듈 을 저장 할 수 있 습 니 다.(여러 모듈 폴 더 를 각각 만 들 고 업무 코드 를 각각 저장 할 수 있 습 니 다)이 폴 더 아래 에 구성 요 소 를 저장 하 는 데 사용 할
components 을 만 듭 니 다.페이지 를 저장 하기 위해 만 들 기pages .모듈 경로 코드 를 저장 하 는 데 사용 되 는 생 성index.route.js.
2.모듈 경로 작성
index.route.js파일 아래 작성,
let router = require.context("./pages",true,/.vue/); // require.context() webpack , require ， ， 。
let arr = [];
// router ， ，router.keys() router 。
console.log(router.keys()); // ["./model1.index.vue", "./model1.second.vue"]
router.keys().forEach((key) => {
let _keyarr=key.split("."); // 。 "./model1.index.vue"
if(key.indexOf("index")!=-1){ // index,
arr.push({
path:_keyarr[1],
component:router(key).default, // import
meta:{
title:_keyarr[1].replace('/','') // "/"
}
})
}
else{
arr.push({
path:_keyarr[1]+"/"+_keyarr[2],
component:router(key).default,
meta:{
title:_keyarr[2]
}
})
}
});
export default arr파일 찾기
router 
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = require.context("../components",true,/\.route\.js/);
let arr=[];
router.keys().forEach((key) => {
arr=arr.concat(router(key).default); //
});
export default new Router({
routes: [
...arr //
]
})Vue 경로 의 모듈 자동화 와 통합 로드 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Vue 경로 의 모듈 자동화 와 통합 로드 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
