SSM项目实战-登录验证成功并路由到首页面,Vue3+Vite+Axios+Element-Plus技术

1、util/request.js

import axios from "axios";let request = axios.create({baseURL: "http://localhost:8080",timeout: 50000
});export default request

2、api/sysUser.js

import request from "../util/request.js";export const login = (data) => {return request.post('/sysUser', data);
}

3、components/Login.vue

<script setup></script><template><div class="common-layout"><el-container><el-header height="120px">&nbsp;</el-header><el-container><el-aside width="36%">&nbsp;</el-aside><el-container><el-main><el-form :model="form" label-width="120px"><el-form-item label="用户名:"><el-input v-model="form.username" input-style="width:200px"/></el-form-item><el-form-item label="密&nbsp&nbsp码:"><el-inputv-model="form.userPwd"type="password"placeholder="Please input password"show-passwordinput-style="width:200px"/></el-form-item><el-form-item><el-button type="primary" @click="doLogin">登录</el-button><el-button>注册</el-button></el-form-item></el-form></el-main><el-footer>&nbsp;</el-footer></el-container></el-container></el-container></div>
</template><script lang="ts" setup>
import {reactive} from 'vue'
import {login} from "../api/sysUser.js";
import router from "../router/router.js";// do not use same name with ref
const form = reactive({username: 'lina',userPwd: '123456',
})const doLogin = async () => {let response = await login(form);let {code, flag, data, msg} = response.data;//console.log(data)if (code === 200 && flag) {await router.push('/index');}
}
</script>

 

 4、router.push()

在Vue.js 3中,router.push仍然是一个非常重要的方法,用于导航到新的路由。这是Vue Router库的一部分,用于管理应用程序的路由。

router.push的主要作用是:

  1. 导航到新路由:当你在应用程序中想要导航到新的页面或者路由时,可以使用router.push。你可以传递一个路由配置对象,或者一个字符串路径作为参数。
  2. 编程式导航:与<router-link>这样的HTML标签相比,router.push是一种编程式导航的方式。这意味着你可以在JavaScript代码中动态地决定要导航到的路由。
  3. 处理回退:如果用户尝试访问他们之前访问过的页面,并且没有新的路由可供导航,那么router.push会处理回退,并导航到前一个路由。
  4. 处理重定向:你可以使用router.push来重定向到一个新的路由,即使这个路由在当前的路由配置中不存在。

下面是一个使用router.push的简单示例:

import { router } from './router'  // 通过传递一个字符串路径进行导航  
router.push('/home')  // 通过传递一个路由配置对象进行导航  
router.push({ path: '/user' })

请注意,在Vue3中,你需要使用createWebHistory()来创建一个HTML5 history对象,并传递给Vue Router的构造函数,以便能够使用router.push进行导航。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/195769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql日志

文章目录 1. 日志类型2. bin log2.1 写入机制2.2 binlog与redolog对比2.3 两阶段提交 3. 中继日志 1. 日志类型 这 6 类日志分别为&#xff1a; 慢查询日志&#xff1a; 记录所有执行时间超过long_query_time的所有查询&#xff0c;方便我们对查询进行优化。 通用查询日志&am…

在sCrypt网站上铭刻Ordinals

sCrypt发布了一个新的Ordinals铭刻工具&#xff0c;连接Panda Wallet后即可使用。你可以观看我们录制的视频教程&#xff0c;获得更多细节。 铭刻工具同时支持BSV主网&#xff08;mainnet&#xff09;和测试网&#xff08;testnet&#xff09;&#xff0c;你可以在我们的官方网…

手写VUE后台管理系统8 - 配置404NotFound路由

设置404页面 配置路由404页面 配置路由 这里配置了两个路由&#xff0c;一个是主页&#xff0c;另外一个则匹配任意路由显示为404页面。因为只配置了两个路由&#xff0c;如果路径没有匹配到主页&#xff0c;则会被自动导向到404页面&#xff0c;这样就可以实现整站统一的404页…

「Linux」使用C语言制作简易Shell

&#x1f4bb;文章目录 &#x1f4c4;前言简易shell实现shell的概念系统环境变量shell的结构定义内建命令完整代码 &#x1f4d3;总结 &#x1f4c4;前言 对于很多学习后端的同学来讲&#xff0c;学习了C语言&#xff0c;发现除了能写出那个经典的“hello world”以外&#xff…

142873-41-4脂质过氧化抑制剂1-星戈瑞

142873-41-4脂质过氧化抑制剂1 英文名称&#xff1a;Lipid peroxidation inhibitor 1 中文名称&#xff1a;脂质过氧化抑制剂 化学名称&#xff1a;2,4,6,7-四甲基-2-[(4-苯基哌啶-1-基)甲基]-3H-1-苯并呋喃-5-胺 CAS&#xff1a;142873-41-4 外观&#xff1a;固体粉末 分…

D2822ML 用于便携式录音机和收音机作音频功率放大器。采用 DIP8 SOP8 封装形式

D2822ML 用于便携式录音机和收音机作音频功率放大器。采用 DIP8 SOP8 封装形式 特点: 电源电压降到 1.8V 时仍能正常工作交越失真小 静态电流小可作桥式或立体声式功放应用外围元件少通道分离度高 开机和关机无冲击噪声软限幅

RT-Thread 内存管理

在计算机系统中&#xff0c;通常存储空间可以分为两种&#xff1a;内部存储空间和外部存储空间。 内部存储空间通常访问速度比较快&#xff0c;能够按照变量地址随机访问&#xff0c;也就是我们通常所说的RAM&#xff08;随机存储器&#xff09;&#xff0c;可以把它理解为电脑…

docker安装达梦数据库并挂在数据卷

离线包下载地址&#xff1a;请点击 1.在线下载 wget https://download.dameng.com/eco/dm8/dm8_20230808_rev197096_x86_rh6_64_single.tar2. 导入镜像 docker load -i dm8_20230808_rev197096_x86_rh6_64_single.tar3. 运行容器 docker run -d -p 5236:5236 --restartalwa…

微信公众号端在线客服系统源码 聊天记录云端实时保存 附带完整的搭建教程

随着社交媒体的普及&#xff0c;越来越多的用户通过微信公众号与企业进行沟通。因此&#xff0c;开发一款基于微信公众号的在线客服系统&#xff0c;可以帮助企业更好地服务用户&#xff0c;提高客户满意度。同时&#xff0c;为了解决聊天记录的存储和管理问题&#xff0c;我们…

【Python 训练营】N_17 冒泡排序

题目 列表L [3,2,5,6,1,3,8,1,9]&#xff0c;冒泡排序实现从小到大排列。 分析 冒泡排序的基本思想是从序列的第一个元素开始&#xff0c;依次比较相邻的两个元素&#xff0c;如果它们的顺序错误就交换它们的位置&#xff0c;直到整个序列有序为止。具体步骤如下&#xff1…

如何看待华为宣称“纯鸿蒙”OS将不再兼容安卓应用 APK彻底再见?

如何看待华为宣称“纯鸿蒙”OS将不再兼容安卓应用 APK彻底再见&#xff1f; 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「安卓开发资料从专业入门到高级教程工具包」&#xff0c;点个关注&#xff0c;…

2023.12.4 GIT的概念和组成

目录 1.git的介绍 2.git的历史 开发者&#xff1a;Linus Torvalds Linux的创始人 3.git和svn的对比 svn:集中式管理 git:分布式管理 4.git管理的组成结构 1.git的介绍 git是项目版本管理工具,能自动的将多个版本进行管理存储,类似于快照,多个人共享版本 git的诞生:分布式…

VIM中替换光标所在行文字内容

:s/old/new/g将光标所在行的所有的old字符替换为new字符 :n,$s/old/new/g 从第n行开始到文件尾&#xff0c;将每一行中的old字符替换为new字符

PyQt pdf格式保存

参考文章 pyqt5:利用QFileDialog从本地选择图片\文本文档显示到label、保存图片\label文本到本地&#xff08;附代码&#xff09;_pyqt5中qfiledialog.getopenfileurl-CSDN博客 txt文件的打开与保存 def openTextFile(self): # 选择文本文件上传fd,fp QFileDialog.getOpen…

springboot统一异常处理

在 Spring Boot 中&#xff0c;可以通过自定义异常处理器来实现统一的异常处理。 创建自定义异常类 首先&#xff0c;创建一个自定义的异常类&#xff0c;继承自 RuntimeException 或其子类。这个异常类可以用来表示应用程序中的特定异常情况。 public class CustomExceptio…

行为型剩余的模式

1.中介者模式 package com.jmj.pattern.mediator;public abstract class Mediator {public abstract void constact(String message,Person person); }package com.jmj.pattern.mediator;public class MediatorStructure extends Mediator{private HouseOwner houseOwner;priva…

华为云云绘本第一期:童话奇迹原来是你

点此进入官网&#xff0c;专家1对1&#xff1a;应用身份管理服务OneAccess_华为云IDaaS-华为云

赛捷CRM集成无需API开发:连接营销系统,优化电商用户运营和广告策略

赛捷CRM集成无需API开发&#xff1a;连接营销系统&#xff0c;优化电商用户运营和广告策略 在当前的电商热潮下&#xff0c;企业如何在竞争中脱颖而出&#xff0c;提高用户运营效率和广告策略的精准度&#xff0c;成为了关键性的挑战。赛捷CRM以其无需API开发的集成解决方案&a…

如何看待 Android 面试却是 Java 面试官?

如何看待 Android 面试却是 Java 面试官&#xff1f; 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Android资料从专业入门到高级教程工具包」&#xff0c;点个关注&#xff0c;全部无偿共享给大家&…

变配电智能监控系统

变配电智能监控系统是一种能够实时监测电力变压器和配电柜、配电箱运行状态的智能设备。这种系统利用先进的传感器和数据通信技术&#xff0c;能够实时监测电力设备的运行状态&#xff0c;包括电压、电流、温度、湿度等参数&#xff0c;并且能够对这些数据进行处理和分析&#…