MyLogin 组件和 MyRegister 组件都不会呈现给浏览器

Question

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中尝试了很多写法。除了直接写组件可以渲染组件外，其他情况下是无法渲染的。我真的不知道问题出在哪里。

Answer 1

这是当您使用 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 开发工具并尝试相同的目录结构来缩小问题范围。