要求：

使用Vue+ElementUI

對用戶帳號、密碼進(jìn)行驗證

登錄功能

登錄后跳轉(zhuǎn)到首頁

用戶退出登錄

退出登錄返回到登錄頁面

基于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;">晟創(chuàng)智能科技后臺管理</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-fieldprepend-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中定義路徑： 這里對路由進(jìn)行了一個封裝

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"),// 首頁統(tǒng)計]}] })

運(yùn)行結(jié)果

首頁展示

?

總結(jié)

以上是生活随笔為你收集整理的VUE+Element学习笔记之登录页面跳转首页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。