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>&nbsp; <RegisterForm></RegisterForm><!-- this is the component itself not th child one--></template><script>import RegisterForm from '@/components/Register-form';export default {&nbsp; components: {&nbsp; &nbsp; RegisterForm&nbsp; },&nbsp; name: "RegisterForm"}</script><style scoped></style>这会生成无限循环，要解决此问题，只需更改导入组件的名称：<template>&nbsp; <RegisterForm1></RegisterForm1></template><script>import RegisterForm1 from '@/components/RegisterForm1';export default {&nbsp; components: {&nbsp; &nbsp; RegisterForm1&nbsp; },&nbsp; name: "RegisterForm"}</script><style scoped></style>

Answer 2

App.vue 中的更改 =><template>&nbsp; <router-view /></template><template>&nbsp; <router-view :key="$route.path" /></template>