Vue-登陆实现

<template>
  <div class="hello">
    // 给my-header组件传递参数 title 组件名字为myHeader 但是在template调用的时候要写为 my-header
    <my-header title="LIKANG TEST"></my-header>
    手机号：<input type="text "  v-model="user_name"/><br/>
    密码：<input type="password" v-model="password" /><br/>
    <button @click="login()">登陆</button>
    <router-link :to="{name:'HelloWorld'}" >Index</router-link>
  </div>
</template>

<script>
// 引入组件
import MyHeader from '@/components/header'
export default {
  name: 'SayHi',
  data () {
    return {
      user_name: '',
      password: ''
    }
  },
  methods: {
    login: function () {
      // let user_name = this.user_name
      // let passowrd = this.password
      this.$http.post('http://1908api.phpclub.top/user/login', {
        data: {
          user_name: this.user_name,
          password: this.password,
          tt: 1
        }
      }).then(function (response) {
        if (response.data.status === 200) {
          alert('ok')
          // eslint-disable-next-line camelcase
          let api_data = response.data.data
          sessionStorage.setItem('id', api_data.user_id)
          sessionStorage.setItem('token', api_data.token)
          this.$router.push({name: 'Index'})
        } else {
          alert(response.data.msg)
        }
      })
    }
  },
  // 组件
  // 前边是在tempalte中使用的，后边的 对应 import MyHeader from '@/components/header' 中的  MyHeader
  components: {
    myHeader: MyHeader
  }
}
</script>
<style>
  h1 {
    color: red;
  }
  .showMe{
    font-size: 40px;
  }
</style>

<template>
  <div class="hello">
    <h1>{{title}}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'header',
  // 组件的参数
  props: ['title'],
  data () {
    return {
      msg: 'Header'
    }
  }
}
</script>