nuxt 페이지 경로 설정,홈 페이지 윤 방 구성 요소 개발 작업

지난 장의 내용 에서 우 리 는 AppHeader 공공 상단 메뉴 내 비게 이 션 바 구성 요 소 를 개 발 했 습 니 다.이 장 은 메뉴 내 비게 이 션 의 경로 에 따라 내 비게 이 션 을 통 해 페이지 페이지 를 설정 합 니 다.
페이지 디 렉 터 리 로 이동 하려 면[nuxt 3 개 를 만들어 야 합 니 다.link_name].vue 페이지 파일 은 내 비게 이 션 에서 불 러 올 페이지 와 일치 합 니 다.
자,명령 행 에 들 어가 서 페이지 파일 을 만 듭 니 다.
1.windows 시스템 에서 다음 명령 을 사용 할 수 있 습 니 다.
for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v
2.linux/mac 시스템 에서 다음 명령 을 사용 할 수 있 습 니 다.
touch index.vue jokes.vue about.vue
좋 습 니 다.우 리 는 다음 에 프로젝트 를 vs code 코드 편집기 에 끌 어 다 놓 습 니 다.개발 하기 전에 vue 프로젝트 개발 을 보조 하 는 플러그 인 Vetur 를 설치 해 야 합 니 다.편집기 에 들 어가 서 클릭 합 니 다.
왼쪽 메뉴 의 확장 단 추 를 누 르 거나 단축 키 ctrl+shift+x 를 사용 하면 왼쪽 에 확장 응용 프로그램 상점 목록 이 나타 납 니 다.우 리 는 위의 검색 상자 에 Vetur Enter 를 입력 하여 찾 습 니 다.
첫 번 째 조회 결 과 를 클릭 하면 오른쪽 에 Vetur 의 상세 한 소개 가 나타 납 니 다.우 리 는 위 에 설치 단 추 를 클릭 하여 설치 할 수 있 습 니 다.이 플러그 인 이 필요 합 니 다.vue 파일 문법 이 높 습 니 다.
다음은 vue 기본 파일 구 조 를 빠르게 생 성 합 니 다.파일->첫 번 째 옵션->사용자 코드 세 션 이 열 리 면 검색 상자 가 있 습 니 다.vue 를 입력 합 니 다.편집기
기본적으로 vue.json 을 엽 니 다.아래 내용 을 덮어 씁 니 다.

{
 "Print to console": {
  "prefix": "vue",
  "body": [
   "<template>",
   " <div>$0</div>",
   "</template>",
   "",
   "<script>",
   "export default {",
    "data(){",
     " return {} ",
    "}",
   "",
   "}",
   "",
   "</script>",
   "<style scoped>",
   "</style>"
  ],
  "description": "Log output to console"
 }
}

그 다음 에 우 리 는 빈.vue 파일 을 새로 만 들 거나 빈.vue 파일 에 vue 를 입력 하고 tab 키 를 누 르 면 위의 vue 템 플 릿 구 조 를 자동 으로 생 성 합 니 다.
우 리 는 각각 index.vue,jokes.vue,about.vue 에 대응 하 는 Index Page,Jokes Page,About Page 세 필드 를 도입 하여 세 개의 서로 다른 페이지 구성 요 소 를 구분 합 니 다.
그 다음 에 우 리 는 메뉴 네 비게 이 션 표시 줄 의 네 비게 이 션 링크 를 클릭 하여 페이지 전환 이 발생 하 는 지,그리고 경로 이름과 page 구성 요소 의 명령 이 일치 하 는 규칙 을 관찰 할 수 있 습 니 다.
홈 페이지 윤 방 구성 요소 개발
우선,index.vue 에 있 는 패키지 class 에