vue是怎样进行页面跳转(Vue实现登陆跳转)
类别:编程学习 浏览量:2439
时间:2021-10-04 01:53:47 vue是怎样进行页面跳转
Vue实现登陆跳转本文实例为大家分享了Vue实现登陆跳转的具体代码,供大家参考,具体内容如下
不说废话,先上效果图~
具体的实现方法,参照以下步骤~
1.创建login.vue,绘制login画面,添加跳转事件。
<template> <li class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-page"> <h3 class="title">登录平台</h3> <el-form-item prop="username"> <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input> </el-form-item> <el-form-item style="width:100%;"> <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button> </el-form-item> <el-form-item > <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox> <el-button type="text" @click="forgetpassword">忘记密码</el-button> </el-form-item> </el-form> </li> </template> <script> import { requestLogin } from '../api/api'; export default { data() { return { logining: false, ruleForm2: { }, rules2: { account: [ { required: true, message: '请输入账号', trigger: 'blur' }, ], checkPass: [ { required: true, message: '请输入密码', 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.stri.jpg" alt="vue是怎样进行页面跳转(Vue实现登陆跳转)" border="0" />
2.创建Home.vue菜单栏页面
<template> <el-row class="container"> <el-col :span="24" class="header"> <el-col :span="18" class="logo" > {{sysName}} </el-col> <el-col :span="4" class="userinfo"> <el-dropdown trigger="hover"> <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>我的消息</el-dropdown-item> <el-dropdown-item>设置</el-dropdown-item> <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-col> <el-col :span="24" class="main"> <aside> <el-menu :default-active="$route.path" class="el-menu el-menu-vertical-demo" @select="handleselect" unique-opened router > <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <el-submenu :index="index+''" v-if="!item.leaf"> <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item> </el-submenu> <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> </template> </el-menu> </aside> <section class="content-container"> <li class="grid-content bg-purple-light"> <el-col :span="24" class="breadcrumb-container"> <strong class="title">{{$route.name}}</strong> </el-col> <el-col :span="24" class="content-wrapper"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-col> </li> </section> </el-col> </el-row> </template> <script> export default { data() { return { sysName:'xxx管理平台', sysUserName: '', sysUserAvatar: '', form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { //退出登录 logout: function () { var _this = this; this.$confirm('确认退出吗?', '提示', { //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 || ''; } } } </script> <style scoped lang="scss"> @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 0 230px; 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; } } } </style>
3.制作子页面
<template> <p> homepage</p> </template>
4.路由配置
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,//只有一个节点 iconCls: 'el-icon-menu', //图标样式class children: [ { path: '/homepage', component: Homepage, name: '首页' }, ] }, { path: '/', component: Home, name: '菜单', // leaf: true,//只有一个节点 iconCls: 'el-icon-message', //图标样式class children: [ { path: '/table', component: Table, name: '子菜单01' } ] } ]; export default routes;
5.main.js实现
// 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 = false const 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')
这样一个登陆画面就实现了,具体的源码可以参照:Vue实现登陆跳转
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue组件详解(Vue的方法和属性案例详解)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue引入axios(vue封装axios的几种方法)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- vue react和angular(详解React Angular Vue三大前端技术)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
- 被鉴定的古董价值300万 当心,你可能遇到诈骗了(被鉴定的古董价值300万)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
热门推荐
- python在txt指定行添加文本(Python修改文件往指定行插入内容的实例)
- 图解ftp服务器搭建(三分钟配置一个FTP服务器)
- 织梦tag标签怎样设置(织梦dede修改关键字长度的方法)
- python编程将一个三位数反序输出(python实现整数的二进制循环移位)
- python实现linux服务(Python实现Linux监控的方法)
- python 导入指定文件夹的模块(Python实现的在特定目录下导入模块功能分析)
- extjs tabPanel的用法
- webkit倒影方法(巧用 -webkit-box-reflect 倒影实现各类动效小结)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- html锚点定位
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9