import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '../views/LoginPage.vue'
import HomePage from '../views/HomePage.vue'
import UserManagement from '../views/UserManagement.vue'
import Settings from '../views/Settings.vue'
const routes = [
{
path: '/',
redirect: '/login' // 自动重定向到登录页
},
{
path: '/login',
name: 'Login',
component: LoginPage
},
{
path: '/home',
name: 'Home',
component: HomePage,
meta: { requiresAuth: true } // 需要登录才能访问
},
{
path: '/user-management',
name: 'UserManagement',
component: UserManagement,
meta: { requiresAuth: true } // 需要登录才能访问
},
{
path: '/settings',
name: 'Settings',
component: Settings,
meta: { requiresAuth: true } // 需要登录才能访问
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 全局前置守卫 - 控制路由权限
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('isLoggedIn') === 'true';
// 检查路由是否需要认证
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
// 如果未登录，则重定向到登录页
next({
path: '/login',
query: { redirect: to.full
Path }
})
} else {
// 已登录，允许访问
next()
}
} else {
// 不需要认证，直接访问
next()
}
})
export default router<template>
<div class="login-container">
<h1>Vue 后台管理系统</h1>
<nav>
<router-link to="/home">首页</router-link> |
<router-link to="/user-management">用户管理</router-link> |
<router-link to="/settings">设置</router-link>
</nav>
<div class="login-form">
<h2>登录页面</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label>请输入账号：</label>
<input type="text" v-model="username" required />
</div>
<div class="form-group">
<label>请输入密码：</label>
<input type="password" v-model="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
loading: false,
error: null
}
},
methods: {
async handleLogin() {
this.loading = true;
this.error = null;
try {
// 这里应该是调用API进行验证
// 模拟登录成功
if (this.username === 'admin' && this.password === 'admin123') {
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('user', JSON.stringify({ username: this.username }));
// 登录成功后跳转到首页
this.$router.push('/home');
} else {
throw new Error('用户名或密码错误');
}
} catch (error) {
console.error('登录失败:', error);
this.error = '用户名或密码错误';
} finally {
this.loading = false;
}
}
}
}
</script>
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.login-form {
margin-top: 30px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button[disabled] {
background-color: #ccc;
cursor: not-allowed;
}
.error-message {
color: #e74c3c;
margin-top: 10px;
}
</style><template>
<div class="home-page">
<h1>欢迎来到后台管理系统</h1>
<nav>
<router-link to="/home">首页</router-link> |
<router-link to="/user-management">用户管理</router-link> |
<router-link to="/settings">设置</router-link>
</nav>
<div class="content">
<router-view></router-view>
</div>
<button @click="logout">退出登录</button>
</div>
</template>
<script>
export default {
methods: {
logout() {
//
清除登录状态
localStorage.removeItem('isLoggedIn');
// 使用编程式导航跳转到登录页
this.$router.push('/login');
}
}
}
</script>
<style scoped>
.home-page {
padding: 20px;
}
nav {
margin-bottom: 20px;
}
.content {
margin-bottom: 20px;
}
button {
background-color: #e74c3c;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style><template>
<div class="user-management">
<h2>用户管理</h2>
<p>这里是用户管理页面...</p>
</div>
</template>
<style scoped>
.user-management {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
}
</style><template>
<div class="settings">
<h2>系统设置</h2>
<p>这里是系统设置页面...</p>
</div>
</template>
<style scoped>
.settings {
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
}
</style><template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-
osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')（稍微修改一下以上代码，使登陆后的页面中点击用户管理和设置页面是在当前页面显示内容不会跳转其他页面）
本文介绍了一种用于优化 PATH 环境变量的方法，通过使用 shell 命令结合 Perl 脚本来去除重复项并整理路径格式。这种方法能够有效提高系统的运行效率，并保持环境变量的整洁。
扫一扫
22
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
