VUE路由实现注册登陆功能

VUE实现注册登录功能

首先使用vue-cli创建一个vue项目，需要用到vue.js 路由，可以先命令行输入”npm install vue-router“进行安装。
（关于创建项目前那些工具内容介绍等这里不再赘述）
在这里我们每个组件都放在一个单独的vue文件里，所以在src/components文件夹下创建Register.vue，Login.vue两个文件。

Register.vue

<template>
  <form>
    
    <div class="title">Register Nowdiv>
    
    <input class="username" placeholder="User name" v-model="username"/>
    
    <div class="error">{
    {uError}}div>
    
    <input class="password" placeholder="Password" v-model="userpwd"/>
    <div class="error">{
    {pError}}div>
    
    <input class="pwdagain" placeholder="Confirm Password" v-model="pwdagain"/>
    <div class="error">{
    {aError}}div>
    
    <button class="register-btn" @click="userRegister">Registerbutton>
    
    <router-link to="/Login">已有账号，登陆router-link>
  form>
template>

<script>
export default{
     
  //这里是组件的名字，无影响
  name: 'register',
  data: function () {
     
    return {
     
    //这里主要是初始化用户输入的信息，以及错误提示
      username: '',
      userpwd: '',
      pwdagain: '',
      uError:'',
      pError:'',
      aError:''
    }
  },
  //methods 用于定义的函数。
  methods: {
     
    //这里定义了一个用户注册函数
    userRegister: function () {
     
      //简单进行一下验证，判断是否为空
      //正经项目肯定需要更多的验证规则，这里只是提供一个思路
      if(this.username=="") {
     
       this.uError="用户名不能为空！"
      }
      else {
     
        this.uError=""
      }
      if(this.userpwd=="") {
     
       this.pError="密码不能为空！"
      }
      else {
     
        this.pError=""
      }
      if(this.userpwd!=this.pwdagain) {
     
        this.aError="两次密码不一致！"
      }
      else {
     
        this.aError=""
      }
      if(this.uError==""&&this.pError==""&&this.aError=="") {
     
      //  验证通过后通过axios来完成ajax请求，将注册信息传到后端
      //  这里不涉及后端内容，仅提供思路
      //  this.$axios.get('路径?参数').then(res => ())
      //  this.$axios.post('路径',{参数}).then(res => ())
      //  默认注册成功，跳转到登陆页面
        this.$router.push('/Login')
      }
    }
  }
}
</script>

Login.vue

//登陆表单和注册表单差不多，就是少了个确认密码
//同样是通过axios向后端传递登陆信息，登陆成功将跳转到网站首页
//this.$router.push('/index')

/*css部分两个组件的都一样，不过这里在index.html文件设置了页面背景为黑色*/
/*完全可以根据自身需要进行修改*/

写完注册登陆组件后，我们需要将它们放到主组件下，也就是App.vue里。当然，在这之前需要将项目创建后自带的HelloWorld.vue组件移除。

App.vue

<template>
  <div id="app">
    
    <p class="nav">
      
      
      
      <router-link to="/index">首页router-link>
      <router-link to="/Register">注册router-link>
    p>
    
    
    <router-view>router-view>
  div>
template>

在使用路由跳转前，我们还需要定义路由，这样才知道 ”to“的链接指向哪里。
首先我们先在main.js文件下新增一行代码引入路由组件

import router from './router'

在index.js文件下新增以下两行代码

import Router from 'vue-router'
Vue.use(Router)

接下来就是定义路由组件了，因为刚刚已经写好了，所以这里直接import进来

import Register from '@/components/Register.vue'
import Login from '@/components/Login.vue'
import Router from 'vue-router'

然后我们定义路由，也就是后面这个链接，每个路由应该映射一个组件
但我们可以发现，通过vue-cli创建的项目里，由于HelloWorld组件的存在，已经有了一个路由实例了，我们可以直接添加

export default new Router({
     
  routes: [
    {
     
      path: '/Register',
      name: '注册',
      component: Register
    },
    {
     
      path: '/Login',
      name: '登陆',
      component: Login
    }
  ]
})

然后我们可以看看效果，点击按钮下面的链接我们就可以跳转到不同组件了


这里是错误提示的效果

以上就是一个运用vue路由实现注册登陆功能的小实例，可以帮助理解vue路由的使用，适合刚刚接触vue的小白。