为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

白板的微信 2023-08-24 17:54:28
当我单击路由器链接转到注册表单页面时,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>
查看完整描述

2 回答

?
翻翻过去那场雪

TA贡献2065条经验 获得超13个赞

问题出在../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>


查看完整回答
反对 回复 2023-08-24
?
潇潇雨雨

TA贡献1833条经验 获得超4个赞

App.vue 中的更改 =>


<template>

  <router-view />

</template>


<template>

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

</template>


查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 113 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信