Vue实现登陆跳转

本文实例为大家分享了Vue实现登陆跳转的具体代码，供大家参考，具体内容如下

不说废话，先上效果图~

具体的实现方法，参照以下步骤~

1.创建login.vue，绘制login画面，添加跳转事件。

2.创建Home.vue菜单栏页面

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实现登陆跳转

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。