创新实训（七）侧边栏及前端路由编写

前言

本周的前端工作主要是侧边栏的实现以及前端路由的编写。

效果展示

侧边栏编写

主要使用了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,
    },