파일 구조에 따른 Vue 자동 라우팅

VueJS로 작업할 때 내 문제 중 하나는 특히 프로젝트가 점점 커지고 Route.ts 또는 Route.js를 유지하는 데 문제가 되는 경우 경로를 생성할 때입니다. 페이지가 너무 많아서 새 페이지를 만들 때 경로를 업데이트해야 하고 오류 표시를 피하기 위해 페이지를 삭제할 때마다 경로 파일을 업데이트해야 하는 프로젝트가 아직도 기억납니다.

그래서 파일 기반을 사용하여 자동 라우팅을 만드는 방법을 찾기 시작했습니다. 인터넷에서 찾은 결과의 대부분은 대부분 webpack과 버전 2에 대한 것이기 때문에 Google에서 검색하려고 하면 찾기가 어려웠습니다. 그래서 Vue Github repo 토론에서 질문해야 답변을 얻었습니다.

Unplugin Vue Router를 소개합니다. 이는 Vue 3용 형식화된 파일 기반 라우팅입니다. 실제로 설정도 쉽습니다. 이는 Github readme 파일에 명시된 대로 실험적입니다.

먼저 Vue 프로젝트를 처음부터 만들어 보겠습니다. 우리 모두 알고 있듯이 이 명령을 실행하여 프로젝트를 생성한 다음 몇 가지 옵션에 응답할 수 있습니다. 수행 방법이 익숙하지 않은 경우 VueJs 페이지에서 빠른 시작을 확인할 수 있습니다.

이 예에서는 이것이 제가 프로젝트를 만든 방법입니다.

우리는 Select TypeScript를 사용할 예정입니다. 또한 페이지가 자동으로 재생성되도록 라우터를 활성화했습니다.

우리 프로젝트에 CD를 넣고 종속성을 설치합니다. 따라서 사용한 패키지 관리자에 따라 사용할 수 있습니다. 저는 pnpm을 사용하고 있는데 마음에 들기 시작했습니다. 이제 프로젝트가 생성되면 unplugin-vue-router를 설치해야 합니다.

이제 vite.config.ts를 업데이트해 보겠습니다. 플러그인을 인덱스 0에 넣어야 합니다.

다음에는 편집자가 패키지 유형을 쉽게 찾을 수 있도록 env.d.ts를 업데이트하겠습니다.

그런 다음 src/router/index.ts에서 라우터 index.ts를 업데이트하겠습니다.

이제 모든 작업이 완료되었으므로 src/pages 디렉토리를 생성할 수 있습니다. 이 폴더 또는 디렉토리에 페이지를 추가하고 파일 구조에 따라 자동으로 경로를 생성합니다. Nuxt에 익숙하신 분들이라면 비슷하실 겁니다

srcpagesabout.vue에 About 페이지를 생성해 보세요.

srcpagesindex.vue의 색인을 사용하여 홈페이지를 만들어 보겠습니다.

그런 다음 dev 스크립트를 실행하여 vue 앱을 실행할 수 있습니다. pnpm 개발자. 홈을 클릭하면 홈 페이지로 리디렉션되고, 정보를 클릭하면 정보 페이지로 리디렉션됩니다.

이제 모든 것이 준비되었습니다. 라우터 폴더 구조에 익숙하지 않은 경우. 이 문서는 https://uvr.esm.is/guide/file-based-routing.html.

이 콘텐츠에 src/pages/blog/[id].vue와 같은 슬러그 구성 요소를 추가해 보겠습니다.

이제 pnpm dev를 다시 실행해 보겠습니다. 그리고 http://localhost:5173/blog/6에 접속하면 이것을 얻게 될 것입니다.

놀랍죠? 이 짧은 블로그가 귀하의 VueJS 여정에 도움이 되었기를 바랍니다. 좋은 하루 보내세요

이 글이 마음에 드시고 응원의 마음을 표현하고 싶으시면 커피 한 잔 사주시면 됩니다. 귀하의 기여에 크게 감사드립니다!

이 글이 마음에 드시고 응원의 마음을 표현하고 싶으시면 커피 한 잔 사주시면 됩니다. 귀하의 기여에 크게 감사드립니다!

위 내용은 파일 구조에 따른 Vue 자동 라우팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!