Shulou(Shulou.com)06/01 Report--

Effect picture

For specific implementation methods, refer to the following steps ~

1. Create login.vue, draw login screen, and add jump events.

Login platform login remember password forget password import {requestLogin} from ".. / api/api" Export default {data () {return {logining: false, ruleForm2: {}, rules2: {account: [{required: true, message: "Please enter account", trigger: "blur"},], checkPass: [{required: true, message: "Please enter password" Trigger: "blur"},]}, checked: true} }, methods: {handleReset2 () {this.$refs.ruleForm2.resetFields ();}, handleSubmit (ev) {this.$refs.ruleForm2.validate ((valid) = > {if (valid) {this.logining = true; var loginParams = {username: this.ruleForm2.username, password: this.ruleForm2.password, identifycode: this.ruleForm2.identifycode} RequestLogin (loginParams) .then (data = > {this.logining = false; let {msg, code, user} = data; if (code! = = 200) {this.$message ({message: msg, type: "error"}) } else {if (user.type = "admin") {sessionStorage.setItem ("user", JSON.stringify (user)); this.$router.push ({path: "/ homepage"});} else if (user.type = "advert") {sessionStorage.setItem ("user", JSON.stringify (user)) This.$router.push ({path: "/ table"});});} else {console.log ("error submittance!"); return false;}}) }, forgetpassword () {this.$alert ("Please contact the administrator to retrieve the password, administrator phone: 131xxxxxxxx", "prompt", {confirmButtonText: "OK", type: "warning"} label.el-checkbox.rememberme {margin: 0px 0px 15px; text-align: left } label.el-button.forget {margin: 0; padding: 0; border: 1px solid transparent; outline: none;}

two。 Create a Home.vue menu bar page

{{sysName}}

{{sysUserName}} my message is set to log in {{item.name}} {{child.name}} {{item.children [0] .name}} {{route.name}} export default {data () {return {sysName: "xxx Management platform" SysUserName: ", sysUserAvatar:", form: {name: ", region:", date1: ", date2:", delivery: false, type: [], resource: ", desc:"}}, methods: {/ / exit login logout: function () {var _ this = this This.$confirm ("confirm exit?", "prompt", {/ / type: "warning"}). Then (() = > {sessionStorage.removeItem ("user"); _ this.$router.push ("/ login");}). Catch (() = > {});}}, mounted () {var user = sessionStorage.getItem ("user"); if (user) {user = JSON.parse (user) This.sysUserName = user.name | | "; this.sysUserAvatar = user.avatar | |";} @ import ".. / style/vars.scss"; .container {position: absolute; top: 0px; bottom: 0px; width: 100%;} .header {height: 60px; line-height: 60px; background: $color-primary; color:#fff; .userinfo {text-align: right; padding-right: 35px Float: right;. Userinfo-inner {cursor: pointer; color:#fff; img {width: 40px; height: 40px; border-radius: 20px; margin: 10px 0px 10px 10px; float: right;} .logo {height:60px; font-size: 22px; padding-left:20px; img {width: 40px; float: left; margin: 10px 10px 10px 0px } .txt {color:#fff;}} .logo-width {width:230px;} .logo-collapse-width {width:60px} .title {font-size: 22px; padding-left:20px; line-height: 60px; color:#fff;}} .main {display: flex; position: absolute; top: 60px Bottom: 0px; overflow: hidden; aside {flex:0 0230px; width: 230px; .el-menu {height: 100%; / * width: 34%; * /}}. Content-container {flex:1; / * overflow-y: scroll; * / padding: 20px; .breadcrumb-container {.title {width: 200px Float: left; color: # 475669;}. Breadcrumb-inner {float: right;}} .content-wrapper {background-color: # fff; box-sizing: border-box;}

3. Make a subpage

Homepage

4. Routing configuration

Import Login from ". / views/Login.vue" import Home from ". / views/Home.vue" import Homepage from ". / views/list/homepage.vue" import Table from ". / views/list/Table.vue" let routes = [{path: "/ login", component: Login, name: ", hidden: true}, {path:" / ", component: Home, name:" Leaf: true,// has only one node iconCls: "el-icon-menu", / / icon style class children: [{path: "/ homepage", component: Homepage, name: "Home"},]}, {path: "/", component: Home, name: "menu", / / leaf: true / / there is only one node iconCls: "el-icon-message", / / icon style class children: [{path: "/ table", component: Table, name: "submenu 01"}]}] Export default routes

5.main.js implementation

/ / The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from "vue" import App from ". / App" import VueRouter from "vue-router" import routes from ". / routes" import Vuex from "vuex" import store from ". / vuex/store" import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" import Mock from ". / mock" Mock.bootstrap () Import ". / style/login.css" / * Vue.use (VueAxios, axios) * / Vue.use (ElementUI) Vue.use (VueRouter) Vue.use (Vuex) Vue.config.productionTip = falseconst router = new VueRouter ({routes}) router.beforeEach ((to, from, next) = > {/ / NProgress.start (); if (to.path = "/ login") {sessionStorage.removeItem ("user");} let user = JSON.parse (sessionStorage.getItem ("user")) If (! user & & to.path! = "/ login") {next ({path: "/ login"})} else {next ()}) new Vue ({router, store, render: h = > h (App)}). $mount ("# app") Thank you for your reading. This is the content of "how to achieve login jump in Vue". After the study of this article, I believe that you have a deeper understanding of how to achieve the landing jump of Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.