Vue如何实现登陆跳转

这篇文章主要讲解了“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菜单栏页面


       {{child.name}}
      
      0" :index="item.children[0].path">{{item.children[0].name}}
     
                
            
   
    
     
      {{$route.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.制作子页面

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://dzwzjz.com/article/jejcgc.html

大橙子网站建设，新征程启航

Vue如何实现登陆跳转

登录平台

其他资讯