Vue3 Vue Router4 零基础教程创建路由 导航菜单全程一步一操作复制粘贴即可运行适配 Vue3script setup Element Plus一、准备工作先安装依赖打开项目终端执行这两个命令# 1. 安装路由Vue Router4 适配 Vue3npminstallvue-router4# 2. 安装Element Plus菜单组件npminstallelement-plus二、第1步创建页面文件在src下新建文件夹views创建4个基础页面极简模板1. 首页src/views/Home.vuetemplate h1首页/h1 /template2. 关于页src/views/About.vuetemplate h1关于页面/h1 /template3. 用户页src/views/User.vuetemplate h1用户中心/h1 /template4. 404页面src/views/NotFound.vuetemplate h1404 - 页面不存在/h1 /template三、第2步创建并配置路由在src下新建文件夹router新建文件src/router/index.js路由核心配置// 1. 导入路由所需方法import{createRouter,createWebHistory}fromvue-router// 2. 导入页面组件importHomefrom../views/Home.vueimportAboutfrom../views/About.vueimportUserfrom../views/User.vueimportNotFoundfrom../views/NotFound.vue// 3. 路由规则配置constroutes[// 首页{path:/,name:Home,component:Home},// 关于页{path:/about,name:About,component:About},// 用户页{path:/user,name:User,component:User},// 404页面必须放在最后{path:/:pathMatch(.*)*,name:NotFound,component:NotFound}]// 4. 创建路由实例constroutercreateRouter({history:createWebHistory(),// 无#号模式推荐routes})// 5. 导出路由给项目使用exportdefaultrouter四、第3步全局注册路由让整个项目生效打开src/main.js修改为import{createApp}fromvueimportAppfrom./App.vue// 导入路由importrouterfrom./router// 导入Element PlusimportElementPlusfromelement-plusimportelement-plus/dist/index.cssconstappcreateApp(App)// 注册路由 组件库app.use(router)app.use(ElementPlus)app.mount(#app)五、第4步编写导航菜单核心打开src/App.vue全部替换为以下代码template !-- 页面布局 -- div classapp-container !-- 导航菜单 -- el-menu classmenu modehorizontal :default-activeroute.path !-- 循环生成菜单 -- el-menu-item v-foritem in menuList :keyitem.path :indexitem.path clickgoToPage(item.path) {{ item.name }} /el-menu-item /el-menu !-- 路由页面出口页面会显示在这里 -- div classpage-content router-view / /div /div /template script setup // 导入路由工具 import { useRouter, useRoute } from vue-router const router useRouter() // 用于跳转页面 const route useRoute() // 用于获取当前页面地址 // 菜单配置和路由一一对应 const menuList [ { path: /, name: 首页 }, { path: /about, name: 关于 }, { path: /user, name: 用户中心 } ] // 菜单点击跳转方法 const goToPage (path) { router.push(path) } /script style scoped .app-container { width: 100%; height: 100vh; } /* 菜单样式 */ .menu { background-color: #409eff; } /* 页面内容样式 */ .page-content { padding: 20px; } /style六、第5步自定义菜单样式可选美化导航在App.vue的style scoped中追加代码修改菜单文字颜色/悬浮效果/* 穿透修改Element菜单样式Vue3固定写法 */.menu :deep(.el-menu-item){color:white;}.menu :deep(.el-menu-item:hover){background-color:#66b1ff!important;}.menu :deep(.el-menu-item.is-active){background-color:#337ecc!important;color:white;}七、运行测试终端执行npmrun dev打开浏览器点击菜单 → 页面自动切换菜单自动高亮当前页面输入错误地址 → 显示404核心知识点总结必看路由配置path是地址component是对应页面导航菜单和路由的path一一对应点击实现跳转router-view页面展示的容器必须写:deep()Vue3 专属语法用于修改第三方组件样式404路由必须放在路由配置最后一行完整流程速记创建页面 → 配置路由 → 注册路由 → 写导航菜单 → 运行生效新手照着这个流程做永远不会出错