个体网站建设,建站之星官网建设,官方网站建设教程,如何把做的网站与域名连接不上【Vue3】嵌套路由 背景简介开发环境开发步骤及源码 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日子。本文内… 【Vue3】嵌套路由 背景简介开发环境开发步骤及源码 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中嵌套路由的基本写法。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 在 【Vue3】路由基础 的基础上新增 3 个页面组件。 Permission.vue templatediv classpermission这是权限页面/div
/templatescript setup langts
/scriptstyle scoped langscss
/styleLog.vue templatediv classlog这是日志页面/div
/templatescript setup langts
/scriptstyle scoped langscss
/styleWarn.vue templatediv classwarn这是告警页面/div
/templatescript setup langts
/scriptstyle scoped langscss
/style2 修改 src/router/index.ts添加新增的 3 个页面组件的路由配置全部置于 /system 下作为二级路由使用。
import { createRouter, createWebHistory } from vue-router
import Dashboard from /pages/Dashboard.vue
import Log from /pages/Log.vue
import Permission from /pages/Permission.vue
import Warn from /pages/Warn.vue
import System from /pages/System.vue
import About from /pages/About.vueconst router createRouter({// 路由器工作模式history: createWebHistory(),routes: [{path: /dashboard,component: Dashboard},{path: /system,component: System,children: [{path: permission,component: Permission},{path: log,component: Log},{path: warn,component: Warn}]},{path: /about,component: About}]
})export default router3 修改 System.vue 页面组件添加导航到 3 个新增页面组件的路由功能。
templatediv classsystemdiv classnavigateRouterLink to/system/permission classlink active-classlink-active权限/RouterLinkRouterLink to/system/log classlink active-classlink-active日志/RouterLinkRouterLink to/system/warn classlink active-classlink-active告警/RouterLink/divhrdiv classcontentRouterView //div/div
/templatescript setup langts
import { RouterLink, RouterView } from vue-router
/scriptstyle scoped langscss
.system {padding: 20px 10px;.navigate {margin-bottom: 20px;.link {background: #eee;border-radius: 3px;color: #aaa;margin-right: 5px;padding: 5px 15px;text-decoration: none;}.link-active {background: #75C5BA;color: blue;}}
}
/style4 执行命令 npm run dev 启动应用浏览器访问http://localhost:5173/点击左侧菜单进入 系统管理 页面点击顶部按钮观察路由切换效果。
