const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/project",
name: "projectGroup",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Index.vue"),
children: [
{
path: "sample/:id",
name: "projectGroup:sample",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Sample.vue"),
},
{
path: "alg/:id",
name: "projectGroup:alg",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Alg.vue"),
},
],
},
],
});
1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示
//BaseHeader是我自己的定义的组件,为当前页面的头部
//BaseSide 自定义组件,为当前页面的侧边栏
也可以使用element plus中的Container 布局容器
2. BaseHeader.vue文件里面为页面头部样式,头部样式相对简单
3. BaseSide.vue文件里面是侧边栏样式,这里是重点!!!这里进行页面路由跳转设置
//因为我的侧边栏数据是需要动态获取的,所以这里的index不能相同,否则几个侧边栏会同时展开时
{{ i.name }}
//这里使用,通过属性to来进行跳转,里面的name就是刚才在router.js文件中设置的,params这里包含的是路由跳转时传递的参数
算法
样本
//因为我的数据是动态获取,所以要先判断一下是否有数据,有数据再显示侧边栏
样式如下: