云E办思路回顾_云e办 sessionstorage里面都有什么-优快云博客

本文链接：https://blog.youkuaiyun.com/cloudgaps/article/details/117954996

本文介绍了使用Vue CLI创建项目，并结合Element UI实现登录页面与表单验证。详细讲述了如何封装axios，处理sessionStorage中的token，以及根据token进行请求。登录成功后，利用Element UI布局创建Home界面，设置动态菜单，根据vue-router的index属性实现菜单跳转。此外，还展示了如何使用标签页组件实现具体功能页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue/cli创建项目。

2.使用eslint、prettierrc格式化语法。

3.写login页面，用element的form表单，注form表单的验证规则对应应该是和每个form-item对应，在其标签上添加prop.

4.封装axios，配置请求头，最主要的是sessionStorage中存储token，然后在请求之前判断本地有无token，每次请求先判断一下，有则携带。

5.登录后home界面使用elementui的布局容器进行实现，布局菜单栏，菜单实现跳转主要是通过其el-menu-item上的index属性，可以在index上设置跳转路径

el-menu上router属性:

router

是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

  <el-menu router>
    <el-submenu
      index='1'
      v-for="(item,index) in $router.options.routes"
      :key="index"
    ></el-submenu>
  </el-menu>

循环routes里的子菜单动态创建子菜单选项。

注意：这里路由路径设置一定要设置到home路由的children节点，否则会默认跳转到APP.js的router-view中

循环时会将所有节点一起循环，此时可以v-if嵌套v-for进行判断是否渲染此菜单，或者使用computed，比如在不需要渲染的菜单路由上增加一个属性，然后computed里return一个被filter过滤后没有该属性的菜单回来交给v-for进行动态渲染

6.具体功能页的组件是用element的标签页写的，标签分页是导入的组件，在其name属性上使用对应导入的组件就行。