亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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條經驗 獲得超14個贊

問題出在../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 關注
  • 182 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號