修改路由bug

whychdw

2019-07-05 7ab97c4ada45550abc7f440d60549b249726a9ff

 src/views/login.vue

@@ -2,17 +2,81 @@
    <div class="login-container">
        <div class="login-form-container">
            <div class="login-form">
                
                <Card>
                    <div class="login-header">用户登录</div>
                </Card>
                <Form ref="user" :model="user" :rules="userRules" style="margin: 20px;">
                    <FormItem prop="name">
                        <Input type="text" v-model="user.name" placeholder="请输入用户名">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="user.password" placeholder="请输入密码">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Checkbox v-model="user.remember">记住密码</Checkbox>
                    </FormItem>
                    <FormItem style="text-align:right">
                        <Button type="primary" long @click="handleSubmit('user')">登录</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
    data(){
        return {
            user: {
                name: 'admin',
                password: 'admin',
                remember: true
            },
            userRules: {
                name: [
                    { required: true, message: '用户名不能为空'}
                ],
                password: [
                    { required: true, message: '密码不能为空'}
                ]
            }
        }
    },
    created: function() {
        sessionStorage.removeItem('store');
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$store.commit('setLogin', true);
                    this.$store.commit('setUserName', this.user.name);
                    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
                    this.$router.push('/index');
                } else {
                    this.$Message.error('登录失败！用户名/密码错误');
                }
            })
        }
    }
}
</script>
<style scoped>
    .login-header{
        padding: 0 16px;
        height: 36px;
        line-height: 36px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 4px;
        color: #000000;
        border-radius: 3px;
        text-align: center;
    }
    .login-container {
        height: 100vh;
        background-image: -webkit-linear-gradient(47deg, #007FF0 0%, #006EDF 28%, #0044BC 76%, #003DAC 100%);
@@ -24,8 +88,8 @@
    }
    .login-form {
        margin: 0 auto;
        width: 500px;
        height: 600px;
        width: 400px;
        padding-bottom: 16px;
        background-color: #FFFFFF;
    }
</style>