在 Vue 项目中，当用户未登录时重定向到登录界面，通常可以根据项目所使用的路由系统（Vue Router）来实现，以下为你详细介绍具体实现步骤。
1. 项目初始化
确保你已经创建了一个 Vue 项目并安装了 Vue Router。如果还没有安装，可以使用以下命令：
bash
npm install vue-router
2. 路由配置
在路由配置文件中，你需要定义路由规则，并且可以设置一些元信息（meta）来标记哪些路由需要进行登录验证。
javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';const routes = [{path: '/',name: 'Home',component: Home,meta: { requiresAuth: true } // 需要登录才能访问},{path: '/login',name: 'Login',component: Login}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
3. 导航守卫设置
Vue Router 提供了导航守卫功能，你可以使用全局前置守卫来检查用户是否登录，如果未登录则重定向到登录页面。
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';const routes = [{path: '/',name: 'Home',component: Home,meta: { requiresAuth: true }},{path: '/login',name: 'Login',component: Login}
];const router = createRouter({history: createWebHistory(),routes
});// 全局前置守卫
router.beforeEach((to, from, next) => {// 检查目标路由是否需要登录if (to.meta.requiresAuth) {// 检查用户是否已登录，这里假设使用 localStorage 存储登录状态const isLoggedIn = localStorage.getItem('isLoggedIn');if (!isLoggedIn) {// 未登录，重定向到登录页面next('/login');} else {// 已登录，继续导航next();}} else {// 不需要登录验证，直接导航next();}
});export default router;
4. 登录逻辑处理
在登录页面中，当用户登录成功后，需要设置登录状态并跳转到目标页面。
vue
<!-- src/views/Login.vue -->
<template><div><h1>Login</h1><button @click="login">Login</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const login = () => {// 模拟登录成功localStorage.setItem('isLoggedIn', 'true');// 跳转到主页router.push('/');
};
</script>
5. 注销逻辑处理
在用户注销时，需要清除登录状态并跳转到登录页面。
vue
<!-- src/views/Home.vue -->
<template><div><h1>Home</h1><button @click="logout">Logout</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const logout = () => {// 清除登录状态localStorage.removeItem('isLoggedIn');// 跳转到登录页面router.push('/login');
};
</script>
总结
通过以上步骤，你可以在 Vue 项目中实现当用户未登录时重定向到登录界面的功能。核心要点是使用 Vue Router 的全局前置守卫来检查路由的元信息和用户的登录状态，并根据情况进行重定向。
