Vue3은 동적 메뉴 기능을 구현합니다.

기사 디렉토리

  • 0. 효과 시연
  • 1. Vue3 프로젝트 빌드
    • 1.1 vite 스캐폴딩을 사용하여 Vue3 프로젝트 만들기
    • 1.2 파일 별칭 설정
    • 1.3 Element-plus 설치 및 구성
    • 1.4 라우팅 설치 및 구성
  • 2. 로그인 페이지
  • 3.백엔드 관리 페이지
    • 3.1 배경 프레임워크 구축
    • 3.2 왼쪽 메뉴바
    • 3.3 헤더 사용자 정보
    • 3.4 주요 내용
    • 3.5피트
  • 4. 정적 라우팅 구성
  • 5. 녹화 활성화 메뉴
    • 5.1 el-menu는 default-active 속성을 바인딩합니다.
    • 5.2 메뉴에 클릭 이벤트 추가
    • 5.3 활성화 메뉴 초기화
  • 6. 동적 라우팅
    • 6.1 성공적인 로그인 및 데이터 저장
    • 6.2 경로 탐색 가드는 경로를 동적으로 구성합니다.
    • 6.3 페이지 새로 고침 후 빈 페이지 문제 해결
  • 7. 완전한 코드

주요 단계:
여기에 이미지 설명을 삽입하세요.

0. 효과 시연

여기에 이미지 설명을 삽입하세요.

1. Vue3 프로젝트 빌드

1.1 vite 스캐폴딩을 사용하여 Vue3 프로젝트 만들기

npm create vite@latest vue3-zhifou -- --template vue

방금 생성한 프로젝트 폴더에 코드 편집기를 입력합니다.

#安装依赖
 npm

추천

출처blog.csdn.net/bjzhang75/article/details/142642749