Vue.js 3-组件无法通过路由器加载到 VueJS 中

Question

当我单击路由器链接转到注册表单页面时，URL 会发生变化，但组件不会加载。我在组件中有导航栏，我认为这是错误的，但没有......这是路由器的文件代码：    import {createRouter, createWebHashHistory} from 'vue-router'const routes = [    {        path: '/',        name: 'Home',        component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')    },    {        path: '/formulario-registro',        name: 'RegisterForm',        component: () => import(/*webpackChunkName: "registerform"*/ '../views/RegisterForm.vue')    }]const router = createRouter({    history: createWebHashHistory(),    routes});export default router这是我的导航组件，其中有路由器链接：  <div class="nav"><div class="brand">  <router-link to="/">BookArt</router-link></div><div class="collapse">  <span id="mobile-icon" v-on:click="responsiveNavbar"></span></div><div class="links">  <ul id="nav-list-group">    <li class="list-item">      <router-link to="/"> Inicio</router-link>    </li>    <li class="list-item">      <router-link to="/formulario-registro"> Registro</router-link>    </li>    <li class="list-item">      <router-link to=""> Login</router-link>    </li>  </ul></div>我的 main.js 代码：    import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'createApp(App).use(store).use(router).mount('#app')我的 App.vue 代码： <template>  <Nav></Nav>  <router-view/></template><script>import Nav from '@/components/Nav.vue'export default {  components: {    Nav  }}</script>这是我的注册表单组件的代码：   <template>  <form action="">    <div class="form-group">      <input type="text" name="form.username" id="form.username" class="username" placeholder="Nombre de usuario....">    </div>    <div class="form-group">      <input type="file" name="form.profile_pic" id="form.profile_pic" class="profile_pic"             placeholder="Foto de perfil....">    </div>

Answer 1

问题出在../view/RegisterForm呈现自身的组件中：

<template>

  <RegisterForm></RegisterForm><!-- this is the component itself not th child one-->

</template>

<script>

import RegisterForm from '@/components/Register-form';

export default {

  components: {

    RegisterForm

  },

  name: "RegisterForm"

}

</script>

<style scoped>

</style>

这会生成无限循环，要解决此问题，只需更改导入组件的名称：

<template>

  <RegisterForm1></RegisterForm1>

</template>

<script>

import RegisterForm1 from '@/components/RegisterForm1';

export default {

  components: {

    RegisterForm1

  },

  name: "RegisterForm"

}

</script>

<style scoped>

</style>

Answer 2

App.vue 中的更改 =>

<template>

  <router-view />

</template>

<template>

  <router-view :key="$route.path" />

</template>