前言
本周的前端工作主要是侧边栏的实现以及前端路由的编写。
效果展示
侧边栏编写
主要使用了elementplus自带的el-menu.
官方文档：https://element-plus.gitee.io/zh-CN/component/menu.html#left-and-right
垂直菜单，可内嵌子菜单。
通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。
编写起来还是比较容易的，注意子菜单如何编写。
代码如下：
<div>
<div class="toggle-button" @click="toggleCollapse()" style="font-size:20px;line-height:24px;text-align: center;letter-spacing: 0.2em; cursor:pointer;background-color: lightgray;padding:5px 0px 5px 0px" id="guide-collapse" >
</div>
<el-menu :default-active="this.activePath" :collapse="isCollapse" class="el-menu-vertical-demo" router active-text-color="#409Eff" style="min-height: calc(100vh - 51px)" >
<!-- 图标在这里选：https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88 -->
<el-menu-item index="/MainPage" id="guide-shouye">
<el-icon><house /></el-icon>
<span>首页</span>
</el-menu-item>
<el-sub-menu index="2" id="guide-mission">
<template #title>
<el-icon><list /></el-icon>
<span>联邦学习</span>
</template>
<el-menu-item index="/TaskList">
<el-icon><tickets /></el-icon>任务大厅</el-menu-item >
<el-menu-item index="/NewTask">
<el-icon><circle-plus /></el-icon>发布任务</el-menu-item >
<el-menu-item index="/History">
<el-icon><Clock /></el-icon>历史任务</el-menu-item >
</el-sub-menu>
<el-menu-item index="/howtoUse" id="guide-shuoming">
<el-icon><help /></el-icon>
<span>使用说明</span>
</el-menu-item>
<el-menu-item index="/about" id="guide-guanyu">
<el-icon><warning /></el-icon>
<span>关于</span>
</el-menu-item>
</el-menu>
</div>
至于如何加图标，这里也是用el-icon即可。
侧边栏伸缩
1、首先应该在菜单顶部放一个折叠展开的按钮条；
接下来，画按钮条UI结构，实现折叠与展开功能；
在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV；在该DIV上面添加文本，通过点击该DIV，触发菜单折叠与展开。
<div class="toggle-button" @click="toggleCollapse()" style="font-size:20px;line-height:24px;text-align: center;letter-spacing: 0.2em; cursor:pointer;background-color: lightgray;padding:5px 0px 5px 0px" id="guide-collapse" >
</div>
2、实现点击该DIV时，触发菜单折叠与展开。
首先，需要为该DIV 按钮条，绑定单击事件。
为侧边栏菜单绑定 collapse 属性；
:collapse="isCollapse"
https://element-plus.gitee.io/zh-CN/component/menu.html#collapse-%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF
接下来先为侧边栏菜单 collapse 属性 动态赋值，并实现按钮条的点击单击事件，让折叠与展开效果生效；
通过collapse-transition 关闭侧边栏收缩动画效果。就是左侧菜单栏收缩是，是否有动画效果。默认值是true。
JS代码如下：
data() {
return {
activePath: this.$route.path,
isCollapse:false,
}
},
methods:{
toggleCollapse(){
this.isCollapse = !this.isCollapse;
},
}
前端路由
路由这里使用vue-router
https://router.vuejs.org/zh/introduction.html
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制 自动激活 CSS 类的链接 HTML5
- history 模式或 hash 模式
- 可定制的滚动行为 URL 的正确编码
这里需要注意的点，主要包括：
路由守卫：
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()
// 从sessionStorage中获取保存到的token值
const tokenStr = window.sessionStorage.getItem('token')
if (!(tokenStr === 'true')) return next('/login')
next()
})
默认路由：
{
path: '/',
redirect: "/Login",
},
子路由：
{
path: "/MainPage",
name: "show",
component: Layout,
// redirect: "/MainPage", //做了重定向，在地址栏输入/时会自动跳转到train页面
children: [
{
path: '/MainPage',
name: 'MainPage',
component: MainPage,
},
{
path: '/Undo',
name: 'Undo',
component: Undo,
},
{
path: '/howtoUse',
name: 'howtoUse',
component: HowtoUse,
},
{
path: '/train',
name: 'train',
component: Train,
},
{
path: '/Training',
name: 'Training',
component: Training,
},
{
path: '/newTask',
name: 'newTask',
component: NewTask,
},
{
path: '/History',
name: 'History',
component: History,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/information',
name: 'information',
component: Vue1,
},
{
path: '/vue2',
name: 'vue2',
component: Vue2,
},
{
path: '/TaskList',
name: 'TaskList',
component: TaskList,
},
{
path: '/CurrentTask',
name: 'CurrentTask',
component: CurrentTask,
},
{
path: '/FinishedTask',
name: 'FinishedTask',
component: FinishedTask,
},
{
path: '/Waiting',
name: 'Waiting',
component: Waiting,
}
]
},
路由重定向：
{
path: '/',
redirect: "/Login",
},
捕捉其他地址，跳转到404页面：
{
path: '/:catchAll(.*)', //404正则表达式，不能用*了
name: '404',
// component: () => import('../views/404.vue')
component: notfound,
},
文章评论