Vue3 implements dynamic menu function

Table of Contents

  • 0. Effect demonstration
  • 1. Build a Vue3 project
    • 1.1 vite scaffolding to create a Vue3 project
    • 1.2 Setting file aliases
    • 1.3 Install and configure element-plus
    • 1.4 Install and configure routing
  • 2. Login Page
  • 3. Backstage management page
    • 3.1 Build the backend framework
    • 3.2 Left Menu Bar
    • 3.3 Header User Information
    • 3.4 Main content
    • 3.5 footer
  • 4. Configure static routing
  • 5. Record activation menu
    • 5.1 el-menu binds the default-active attribute
    • 5.2 Add click event to menu
    • 5.3 Initialize the activation menu
  • 6. Dynamic Routing
    • 6.1 Login successfully and store data
    • 6.2 Routing Navigation Guard Dynamically Configure Routing
    • 6.3 Solve the problem of page blank after refreshing the page
  • 7. Complete code

Main steps:
insert image description here

0. Effect demonstration

insert image description here

1. Build a Vue3 project

1.1 vite scaffolding to create a Vue3 project

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

Enter the newly created project folder in the code editor

#安装依赖
 npm

Guess you like

Origin blog.csdn.net/bjzhang75/article/details/142642749