Vue如何实现登陆跳转

这篇文章主要讲解了"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 = 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")

感谢各位的阅读，以上就是"Vue如何实现登陆跳转"的内容了，经过本文的学习后，相信大家对Vue如何实现登陆跳转这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！