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如何实现登陆跳转这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！