云E办思路回顾

本文介绍了使用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属性上使用对应导入的组件就行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值