VUE+Element学习笔记之登录页面跳转首页

78 阅读 0 评论 52 点赞

我是靠谱客的博主个性小霸王，最近开发中收集的这篇文章主要介绍VUE+Element学习笔记之登录页面跳转首页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

要求：

使用Vue+ElementUI
对用户帐号、密码进行验证
登录功能
登录后跳转到首页
用户退出登录
退出登录返回到登录页面

基于ElementUI前端模版“vuetify-material-dashboard-master”

编辑登录页面

<template>
 <v-app >
    <v-container tag="section" class="login-content">
      <v-flex xs12 sm8 md4>
        <v-card>
          <v-toolbar>
            <v-toolbar-title style="letter-spacing: 2px;">晟创智能科技后台管理</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field prepend-icon="person" v-model="username" label="用户名" type="text"/>
              <v-text-field
                prepend-icon="lock" v-model="password" label="密码" id="password"
                :append-icon="e1 ? 'visibility' : 'visibility_off'"
                :append-icon-cb="() => (e1 = !e1)" :type="e1 ? 'text' : 'password'"></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="doLogin">登录</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      username: "admin",
      password: "admin",
      dialog: false,
      e1: false
    }),
    methods: {
      doLogin() {
        if (!this.username || !this.password) {
          this.dialog = true;
          return false;
        }
        console.log(this.username + " ... " + this.password);
        this.$router.replace("/count");
      }
    }
  };
</script>

登录成功后的首页，/ views/dashboard/ Dashboard

在路由文件router.js中定义路径：这里对路由进行了一个封装

import Vue from 'vue'
import Router from 'vue-router'
import component from "vuetify/lib/util/component";

Vue.use(Router)

function route(name, path, file, children) {
  return {
    extent: true,
    name,
    path,
    children,
    component: () => import('@views/dashboard' + file),
  }
}


export default new Router({
  base: process.env.BASE_URL,
  routes: [
    route("login", "/", "/Login"),
    {
      path: "/count",
      component: () => import('@views/dashboard/Index'),
      redirect: "/count/dashboard",
      children: [ // 其它所有组件都是 Layout的子组件
        route("首页", "/count/dashboard", "/Dashboard"),// 首页统计
      ]
    }
  ]
})

运行结果