vuejs+vuerouter+element,一个非常简单的登录界面及跳转

参考资料：
element
http://element.eleme.io/#/zh-CN/component/installation
vuerouter
https://router.vuejs.org/zh-cn/
vue构建单页面应用实战
http://www.jb51.net/article/110796.html

main.js

import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
import Hello from './components/Hello.vue';
import Login from './components/Login.vue';
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/index',
      component: Hello
    },{
      path: '',
      component: Login
    }
  ]
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

App.vue

<template>
   <div>
     
       <router-view></router-view>

   </div>
</template>

Login.vue

<template>
    <div style="margin-top:15%; margin-left:40%;  ">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="7"> <el-form-item label="用户名">
          <el-input v-model="form.name" type="text"></el-input>
        </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :span="7"> <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col  :span="2" :offset="3">
            <el-button type="primary"  style="width:100%" @click="login" >登录</el-button>
         </el-col>
      </el-row>
    </el-form>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: 'hgf',
          password:'123456'
        }
      }
    },
    methods : {
        login : function () {
          this.$router.push({path:'/index'});
        }
    }
  }
</script>

<style >

</style>

Hello.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data() {
    return {
      msg: '请开始你的表演',
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>