用vue来实现一个小小的注册功能并且能够登录（在之前的文章中发表过登录的代码），不用路由的方式，用localStorage.setItem()和localStorage.getItem()的方式实现页面跳转的数据传递，下面贴js部分代码：

var login = new Vue({
		el:'.tb_login',
		data:{
			username1:[], //存储用户名数据
			password1:[], //存储密码数据
			username:'',
			password:'',
			index:0,
			show:false,
			show1:false,
			show2:false,
			phone:'', //input框中v-model的值，注册的手机号
			pass:'', //input框中v-model的值，注册的密码
			pass1:'' //input框中v-model的值，确认的密码
		},
		methods:{
			// 点击免费注册按钮，跳转至注册页
			regis:function(){
				window.location.href="register.html";
			},
			//点击登录按钮验证用户名和密码
			login:function(){
				//接收已存储的username1和password1并将其转换回数组格式
				var userName = JSON.parse(localStorage.getItem('this.username1'));
				var passWord = JSON.parse(localStorage.getItem('this.password1'));
				while(this.index!=userName.length-1 && username1.length!=0){
					this.index++;
				}
				for(var i=0;i<=this.index;i++){
					//登录成功时的条件，并在匹配成功后退出循环
					if(userName[i]==this.username&&passWord[i]==this.password){
						window.location.href="TB.html";
						//登录成功进入淘宝首页
						break;
					}else{
						//当循环的i值不等于this.index值时，继续循环但不输出
						if(i!=this.index)
							continue;
						//匹配失败，弹出提示框
						else{
							//用户名和密码不匹配时弹出提示
							this.show=true;
							let self=this;
							//弹出的提示框两秒后消失
							setTimeout(function(){
								self.show=false;
							},2000);
							break;
						}
					}
				}
			},
			//点击按钮验证手机号是否符合规范
			verrif:function(){
				var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(!reg.test(this.phone)){
					//检测失败，弹出提示框
                    this.show=true;
					let self=this;
					//弹出的提示框两秒后消失
					setTimeout(function(){
						self.show=false;
					},2000);
                }else{
                	//检测成功将手机号添加到用户名数据中并跳转至设置密码页
                	this.username1.push(this.phone);
                	//本地存储已更新的this.username1并将其转换为字符串格式
         			localStorage.setItem('this.username1',JSON.stringify(this.username1));
                	window.location.href='password.html';
                }
			},
			//点击按钮验证密码
			verrify:function(){
				//验证密码的位数在6位到15位之间
				if(this.pass.length>=6&&this.pass.length<=15){
					if(this.pass==this.pass1){
						this.password1.push(this.pass);
						//本地存储已更新的this.password1并将其转换为字符串格式
						localStorage.setItem('this.password1',JSON.stringify(this.password1));
						this.show2=true;
						let self=this;
						//两秒后跳转至登录页
						setTimeout(function(){
							window.location.href='login.html';
						},2000);
					}else{
						//弹出密码不一致的提示框
						this.show1=true;
						let self=this;
						//弹出的提示框两秒后消失
						setTimeout(function(){
							self.show1=false;
						},2000);
					}
				}else{
					//弹出密码不符合规范的提示框
					this.show=true;
					let self=this;
					//弹出的提示框两秒后消失
					setTimeout(function(){
						self.show=false;
					},2000);
				}
			}
		}
	});

之前在网上看过很多关于localStorage.setItem和local.getItem的应用，但是并没有解决我的困难问题，所以经过与老师的探讨突然开窍的我，一下子就明白了，希望这篇文章对大家有用。