【vue3+ts后台管理】首页完成

【vue3+ts后台管理】首页完成

文章目录

​​布局搭建​​​​首页侧边栏的动态路由​​

布局搭建

根据Element UI 中的​​Container 布局容器-常见页面布局​​，我们复制包含Aside、Header、Main三个部分的布局，复制到 HomeView.vue 的布局中，即：

头部，我们可以左边放一个 logo，中间放一些文字，右侧放退出登录按钮。所以我们可以根据 ​​Layout布局-混合布局​​的左中右的布局来写，我们复制最后的代码放入我们上面代码的 Header 部分

侧边栏，我们可以参考 ​​侧栏​​

然后我们需要修改样式，右键查看布局就能看到布局的 class，通过 class 名增加样式即可

目前的样式为：

首页侧边栏的动态路由

新建 GoodsView.vue 和 UserView.vue 内容可以先随便写点什么

HomeView.vue

index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'import HomeView from '../views/HomeView.vue'const routes: Array = [ { path: '/', name: 'home', component: HomeView, children:[ { path: 'goods', name: 'goods', meta:{ isShow:true, title:'商品列表' }, component: () => import('../views/GoodsView.vue') }, { path: 'user', name: 'user', meta:{ isShow:true, title:'用户列表' }, component: () => import('../views/UserView.vue') } ] }, ......]......export default

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。