登录页开发

<div class="login-container">
    <div class="login-content">
      <div class="login-logo"></div>
      <div class="login-title">用户登陆</div>
      <div class="input-wrap">
        <div><input class="login-input" type="text" placeholder="手机号 / 邮箱" v-model="loginInfo.username"/></div>
        <div><input class="login-input" type="password" placeholder="密码" v-model="loginInfo.password"/></div>
        <div class="login-btn" @click="login">登陆</div>
      </div>
      <div class="error-tips" v-if="loginInfo.errorInfo">用户名或密码错误</div>
      <div class="tips">lvming/abc123</div>
    </div>
</div>
  setup() {
    // 用户数据，响应式数据
    let loginInfo = reactive({
      username: '',
      password: '',
      errorInfo: false
    })
    // 模拟用户信息
    const userInfo = {
      nickname: '吕小鸣',
      age: 30,
      username: '',
      avatar: 'https://qiniu.nihaoshijie.com.cn/images/image-1559844211742.jpeg'
    }

    const store = Vuex.useStore()
    const {proxy} = getCurrentInstance()
    // 登录按钮单击回调
    const login = () => {
      // 验证用户名密码
      if (loginInfo.username == 'lvming' && loginInfo.password == 'abc123') {
        store.commit('setUser', userInfo)
        loginInfo.errorInfo = false
        if (proxy.prevRoute) { // 跳转到登录前的页面
          proxy.$router.push(proxy.prevRoute)
        }
      } else {
        loginInfo.errorInfo = true
      }
    }


    return {
      loginInfo,
      login
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 获取vm this得到上一个页面路由from
      vm.prevRoute = from;
    })
  }