vue登录功能

<template>
	<!-- 容器 -->
	<div id="app">
		<!-- 登录框 -->
		<div class="login">
			<!-- 标题 -->
			<div class="login_one">
				<p><strong>登录</strong></p>
			</div>
			<!-- 账号密码 -->
			<div class="login_two">
				<!-- 输入任意文本 -->
				<van-field v-model="text" label="账号" placeholder="请输入账号" />
				<!-- 输入密码 -->
				<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
			</div>
			<div class="login_three">
				<button type="button" @click="login()">登录</button>
				<!-- <button type="button">注册</button> -->
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		data() {
			return {
				text: '',
				password: ''
			}
		},

		methods: {
			login() {
				let that = this
				axios({
						url: "请求后台地址", // url
						params: {
							// 参数
							account: that.text, //账号
							password: that.password //密码
						},
					})
					.then(function(res) {
						console.log(res); // 成功回调
						localStorage.setItem('userid',res.data.user.id);//本地存储
						that.$router.push('/mycenter'); //页面跳转不传参

					})
					.catch(function(err) {
						console.log(err); // 失败回调
					});
				// console.log(this.text);
			},
		}
	}
</script>

<style>
	/* 容器 */
	#app {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}

	/* 登录框 */
	.login {
		width: 80%;
		height: 30%;
		display: flex;
		flex-direction: column;
		background-color: #DCDEE0;
		border-radius: 10%;
	}

	/* 标题 */
	.login_one {
		width: 100%;
		height: 30%;
		/* border: 1px solid red; */
		font-size: 1.8rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 账号密码 */
	.login_two {
		width: 100%;
		height: 40%;
		/* border: 1px solid red; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 账号密码输入框 */
	.van-field {
		/* border: 1px solid red; */
		width: 80%;
		border: 1px solid #dadada;
		border-radius: 10px;
	}

	.van-field__label {
		width: 20%;
		/* border: 1px solid red; */
	}

	/* 登录 注册 */
	.login_three {
		width: 100%;
		height: 30%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login_three button {
		background-color: #d0d0d0;
		width: 20%;
		height: 50%;
		border-radius: 10px;
	}
</style>

登录后的跳转的页面需要请求id：

params: {
	// 参数
	id: localStorage.getItem('userid'), //获取本地存储
},