Vue如何实现登陆跳转
这篇文章主要讲解了“Vue如何实现登陆跳转”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何实现登陆跳转”吧！
白塔网站建设公司成都创新互联,白塔网站设计制作，有大型网站制作公司丰富经验。已为白塔上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的白塔做网站的公司定做！
效果图
具体的实现方法，参照以下步骤~
1.创建login.vue，绘制login画面，添加跳转事件。
登录平台
登录
记住密码
忘记密码
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;
}
2.创建Home.vue菜单栏页面
{{sysName}}
{{sysUserName}}
我的消息
设置
退出登录
{{child.name}}
0" :index="item.children[0].path">{{item.children[0].name}}
@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;
}
}
}
3.制作子页面
homepage
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如何实现登陆跳转
分享网址：http://cdkjz.cn/article/jejcgc.html
