// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'login',
component: () => import('@/views/LoginPage.vue'),
meta: { title: '登录', keepAlive: true, icon: "user" }
},
{
path: '/home',
name: 'home',
component: () => import('@/views/HomePage.vue'),
meta: { title: '首页', keepAlive: true, icon: "appstore", requiresAuth: true }
},
{
path: '/about',
name: 'about',
component: () => import('@/views/AboutPage.vue'),
meta: { title: '经历', keepAlive: true, icon: "cluster", requiresAuth: true }
},
{
path: '/text',
name: 'text',
component: () => import('@/views/TextPage.vue'),
meta: { title: '简历查看', keepAlive: true, icon: "cluster", requiresAuth: true },
children: [
{
path: '/text/pingmian',
name: 'pingmian',
component: () => import('@/views/Bnotes/PingMian.vue'),
meta: { title: "平面设计师", keepAlive: true, requiresAuth: true }
},
{
path: '/text/web',
name: 'web',
component: () => import('@/views/Bnotes/QiamDuan.vue'),
meta: { title: '前端开发工程师', keepAlive: true, requiresAuth: true }
},
{
path: '/text/node',
name: 'node',
component: () => import('@/views/Bnotes/NodeComplete.vue'),
meta: { title: 'Node.js全栈工程师', keepAlive: true, requiresAuth: true }
}
]
},
{
path: '/manage',
name: 'manage',
component: () => import('@/views/ManagePage.vue'),
meta: { title: '管理', requiresAuth: true }
},
// {
// path:'/school',
// name:'school',
// component: () => import('@/views/Bnotes/SchoolPage.vue'),
// meta: { title: '学校简介', requiresAuth: false }
// }
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 检查目标路由是否需要登录保护
if (to.matched.some(record => record.meta.requiresAuth)) {
// 从 localStorage 中获取登录状态
const isLoggedIn = JSON.parse(localStorage.getItem('isLoggedIn')) || false;
// 如果用户未登录,则重定向到登录页面,并保存目标路径
if (!isLoggedIn) {
next({
name: 'login',
query: { redirect: to.fullPath }
});
} else {
// 用户已登录,继续导航
next();
}
} else {
// 目标路由不需要登录保护,继续导航
next();
}
});
export default router;简历后台管理路由部分
原创wx664db2523030a ©著作权
文章标签 Vue 登录页面 重定向 文章分类 JavaScript 前端开发
-
telnet登录管理路由
telnet配置管理路由
telnet aaa 拓扑 -
我猜后台管理路径猜解
我猜后台管理路径猜解
职场 休闲 后台管理路径 -
telnet远程管理路由交换详解
通过案例解析telnet的使用,和配置管理!
管理 交换路由 telnet
















