Vue.js 3- 组件无法在带有路由器的 VueJS 中加载

Question

当我单击路由器-link 转到注册表单页面时，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

这是我的导航组件，那里有路由器-link:

  <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>
    <div class="form-group">
      <input type="email" name="form.email" id="form.email" class="email" placeholder="Email....">
    </div>
    <div class="form-group">
      <input type="password" name="form.password" id="form.password" class="password" placeholder="*******">
    </div>
    <div class="form-group">
      <input type="password" name="form.confirm_password" id="form.confirm.password" class="confirm_password"
             placeholder="*******">
    </div>
    <div class="form-group">
      <button>Registrarse</button>
    </div>
  </form>

</template>

<script>
export default {
  name: "Register-form",

  mounted() {
    console.log('Its ok');
  }

}
</script>

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>

Vue.js 3- 组件无法在带有路由器的 VueJS 中加载

Vue.js 3- Component doesn't load in VueJS with router

javascript

vue.js

vue-router

vuejs3

vue-router4