main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import router from "./router/router.js";
const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app')
应用程序.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
我的登录.vue
<template>
<div class="login">
<h2>管理员登录</h2>
<form @submit.prevent="login">
<label for="adminname">用户名:</label>
<input type="text" id="adminname" v-model="adminname" required>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">登录</button>
</form>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
<router-link to="MyRegister">没有账号?去注册</router-link>
</div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
export default {
name:'MyLogin',
setup() {
const router = useRouter();
const adminname = ref('');
const password = ref('');
const errorMessage = ref('');
const login = async () => {
try {
const response = await axios.post('/login', {
data: {
adminname: adminname.value,
password: password.value
}
});
const data = response.data;
switch (data.code) {
case 100:
// 登录成功,保存token到localStorage
localStorage.setItem('token', data.data.token);
// 跳转到管理员信息页面或其他页面
router.push('/AdminInfo');
break;
case 101:
errorMessage.value = '用户名或密码不能为空';
break;
case 102:
errorMessage.value = '用户名不存在';
break;
case 103:
errorMessage.value = '密码错误';
break;
case 104:
errorMessage.value = '登录失败,请稍后重试';
break;
default:
errorMessage.value = '未知错误';
}
} catch (error) {
console.error('登录失败:', error);
errorMessage.value = '登录失败,请稍后重试';
}
};
return { adminname, password, errorMessage, login };
}
}
</script>
我的注册.vue
<template>
<div class="register">
<h2>管理员注册</h2>
<form @submit.prevent="register">
<label for="adminname">用户名:</label>
<input type="text" id="adminname" v-model="adminname" required>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
<label for="upAdmin">上级管理员:</label>
<input type="text" id="upAdmin" v-model="upAdmin" required>
<button type="submit">注册</button>
</form>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
export default {
name:'MyRegister',
setup() {
const adminname = ref('');
const password = ref('');
const upAdmin = ref('');
const errorMessage = ref('');
const router = useRouter();
const register = async () => {
try {
const response = await axios.post('/register', {
data: {
adminname: adminname.value,
password: password.value,
up_admin: upAdmin.value
}
});
const data = response.data;
if (data.code === 110) {
// 注册成功,跳转到登录页面
router.push('/login');
} else {
// 注册失败,显示错误消息
errorMessage.value = data.data.msg;
}
} catch (error) {
console.error('注册失败:', error);
errorMessage.value = '注册失败,请稍后重试';
}
};
return { adminname, password, upAdmin, errorMessage, register };
}
}
</script>
路由器.js
import {createRouter,createWebHistory} from 'vue-router';
import MyLogin from '../components/MyLogin.vue';
import MyRegister from '../components/MyRegister.vue';
import AdminInfo from '../components/AdminInfo.vue';
import DownAdmin from '../components/DownAdmin.vue';
const router = createRouter({
history:createWebHistory(),
routes:[
{path: '/', redirect: '/MyLogin' },
{path:'/MyLogin',component:MyLogin},
{path:'/MyRegister',component:MyRegister},
{path:'/AdminInfo',component:AdminInfo},
{path:'/DownAdmin',component:DownAdmin}
]
});
export default router;
我在App.vue中尝试了很多写法。除了直接写组件可以渲染组件外,其他情况下是无法渲染的。我真的不知道问题出在哪里。
这是当您使用 Vue 创建新项目并选择为您设置路由器时生成的内容。
main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})
export default router
/views/AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
/views/HomeView.vue
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>
这些组件运行良好,并且都可以使用 Vue 开发工具进行检查。控制台也没有错误。
TDLR:一切看起来都与你所拥有的非常相似。请逐步尝试新设置以找出差异。检查您的控制台、Vue 开发工具并尝试相同的目录结构来缩小问题范围。