Vue+Webpack 기반 버스트 라우팅 파일 관리

사실은, 만약 당신의 프로젝트가 특별히 크지 않다면, 일반적으로 분할할 필요가 없다.만약 프로젝트가 크다면, 분할 루트를 고려해야 한다.사실 이 조작은 결코 복잡하지 않다.
우리가 vue-cli 도구를 사용하여 새로운 vue 프로젝트를 만들 때, 루트 파일 src/router/index를 새로 만들었습니다.js, 내용은 다음과 같습니다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

우리는 이 서류를 남본으로 삼아 조정을 진행한다.예를 들어 우리는 지금 뉴스의 이 루트를 새로 만들어야 한다. 그리고 이 루트 아래에 또 일부 하위 루트가 있다. 우리는 이렇게 쓸 수 있다.
router/index.js 파일 조정

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
//  VUE 
import frame from '@/frame/frame'

import HelloWorld from '@/components/HelloWorld'
//   news  
import news from './news.js'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/news',
   component: frame,
   children: news
  }
 ]
})

위와 같이, 우리는 하위 루트 보기의 vue 구성 요소를 도입한 다음에news의 하위 루트 프로필을 도입하면 됩니다.다음은 우리가 이 두 개의 서류를 작성할 것이다.
frame/frame 하위 라우팅 보기 vue 구성 요소

하위 루트 보기 구성 요소는 매우 간단합니다. 위의 세 줄 코드와 같이router-view와 관련된 내용은 보십시오.
https://router.vuejs.org/zh/api/#router-view
router/news.js 하위 라우팅 프로필
사실, 이 파일을 설정하는 것은 vue와 아무런 관계가 없습니다. 순전히 jses6의 내보내기와 가져오기일 뿐입니다.

import main from '@/page/news/main'
import details from '@/page/news/details'

export default [
 {path: '', component: main},
 {path: 'details', component: details}
]

위와 같이 하면 된다.우리는 루트의 다중 파일 관리를 완성했다.이렇게 보면 매우 간단하지 않습니까?무슨 문제가 있으면 댓글로 남겨 주세요. 제가 시간을 내서 여러분에게 대답하겠습니다.
더 많은 내용은 공식 사이트를 참고하십시오https://router.vuejs.org/zh/
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.