Vue 路由器在 url 更改时不渲染组件

Question

我在我的 vite 项目中使用 vue router 根据 url 渲染正确的页面/组件。我首先使用 router-link 更改 url，然后指定应在该 url 上呈现的页面。网址正在更改，但页面保持不变。我不太确定我在这里做错了什么

应用程序.vue：

<template>
  <Login />
</template>

登录.vue：

<template>
  <div class="w-64">
    <p class="text-3xl mb-4">Login</p>
    <div class="flex flex-col bg-white p-4 rounded border border-grey text-left">
      <p class="mb-2">Username:</p>
      <input type="text" class="border border-black rounded p-1">
      <p class="mb-2">Password:</p>
      <input type="password" class="border border-black rounded p-1">
    </div>
    <div class="bg-[#99C8C2] w-1/2 rounded p-2 mx-auto mt-4 hover:opacity-70" @click="temp">
        Login
    </div>
    <p> Dont have an Account ?</p>
    <router-link to="/signup">
          Sign Up
    </router-link>
  </div>
</template>

路由器.js：

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import App from './App.vue';
import SignUp from './Pages/SignUp.vue'

const routes = [
  { path: '/',name: 'Main Page', component: App },
  { path: '/signup', component: SignUp }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

main.js：

import { createApp } from 'vue'
import './assets/style.css'
import App from './App.vue'
import router from './router'


const app = createApp(App);
app.use(router);
app.mount('#app');

Answer 1

您应该在 App.vue 中添加

router-view

组件：

<template>
  <router-view></router-view>
</template>