若依框架把首页更换为其他页面

本文介绍了如何在Vue项目中修改首页路由,使其在刷新或关闭页面后默认跳转到自定义地址,以及登录后跳转至指定页面,并在面包屑导航中保持首页指向定制的首页组件。
摘要由CSDN通过智能技术生成

一、修改首页路由(解决刷新页面或关闭全部页面后的默认路由问题)

修改文件mcc-ui/src/router/index.js

 {
     path: '',
     component: Layout,
     redirect: 'index',
     children: [
       {
         path: 'index',
         component: (resolve) => require(['@/views/index'], resolve),
         name: '首页',
         meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
       }
     ]
   },

改为

{
    path: '',
    component: Layout,
    redirect: '自己的地址'
  },

在这里插入图片描述

二、修改登陆后路由(把首页更换为其他页面)

修改文件:mcc-ui/src/views/login.vue

 this.$store.dispatch("Login", this.loginForm).then(() => {
           this.$router.push({path: this.redirect || "/"}).catch(() => {
           })
        }).catch(() => {
          this.loading = false;
        })

改为

 this.$store.dispatch("Login", this.loginForm).then(() => {
          // this.$router.push({path: this.redirect || "/"}).catch(() => {
          // })
          this.$router.push({path: "自己的地址"}).catch(() => {
          })
        }).catch(() => {
          this.loading = false;
        })

在这里插入图片描述

三、点击首页后仍然跳转到自己配置的页面

在这里插入图片描述修改文件mcc-ui/src/components/Breadcrumb/index.vue

       if (!this.isDashboard(first)) {
         matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
       }

修改为

 if (!this.isDashboard(first)) {
         matched = [{ path: '自己的地址', meta: { title: '首页' }}].concat(matched)
       }

在这里插入图片描述

实现头像设置和更换功能需要以下步骤: 1. 在用户表中添加头像字段。 2. 在页面中展示当前用户头像。 3. 实现用户上传头像功能。 4. 实现用户更换头像功能。 下面是一个简单的代码示例: 1. 在用户表中添加头像字段,例如: ``` CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(50) NOT NULL, `avatar` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 2. 在页面中展示当前用户头像,例如: ``` <img src="${pageContext.request.contextPath}/avatar/${currentUser.avatar}" alt="Avatar" class="avatar"> ``` 3. 实现用户上传头像功能,例如: ``` @RequestMapping(value = "/uploadAvatar", method = RequestMethod.POST) @ResponseBody public String uploadAvatar(@RequestParam("file") MultipartFile file, HttpSession session) { User currentUser = (User) session.getAttribute("currentUser"); if (file.isEmpty()) { return "请选择要上传的文件"; } String fileName = file.getOriginalFilename(); String suffixName = fileName.substring(fileName.lastIndexOf(".")); String filePath = "D:/avatar/"; fileName = currentUser.getId() + suffixName; File dest = new File(filePath + fileName); try { file.transferTo(dest); currentUser.setAvatar(fileName); userService.updateUser(currentUser); session.setAttribute("currentUser", currentUser); return "上传成功"; } catch (IOException e) { e.printStackTrace(); } return "上传失败"; } ``` 4. 实现用户更换头像功能,例如: ``` @RequestMapping(value = "/changeAvatar", method = RequestMethod.POST) @ResponseBody public String changeAvatar(@RequestParam("file") MultipartFile file, HttpSession session) { User currentUser = (User) session.getAttribute("currentUser"); if (file.isEmpty()) { return "请选择要上传的文件"; } String fileName = file.getOriginalFilename(); String suffixName = fileName.substring(fileName.lastIndexOf(".")); String filePath = "D:/avatar/"; fileName = currentUser.getId() + suffixName; File dest = new File(filePath + fileName); try { file.transferTo(dest); currentUser.setAvatar(fileName); userService.updateUser(currentUser); session.setAttribute("currentUser", currentUser); return "更换成功"; } catch (IOException e) { e.printStackTrace(); } return "更换失败"; } ``` 以上代码仅供参考,具体实现还需要根据实际需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值