第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Vue.js 3-組件無(wú)法通過(guò)路由器加載到 VueJS 中

Vue.js 3-組件無(wú)法通過(guò)路由器加載到 VueJS 中

白板的微信 2023-08-24 17:54:28
當(dāng)我單擊路由器鏈接轉(zhuǎn)到注冊(cè)表單頁(yè)面時(shí),URL 會(huì)發(fā)生變化,但組件不會(huì)加載。我在組件中有導(dǎo)航欄,我認(rèn)為這是錯(cuò)誤的,但沒有......這是路由器的文件代碼:    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這是我的導(dǎo)航組件,其中有路由器鏈接:  <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>這是我的注冊(cè)表單組件的代碼:   <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 回答

?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

問題出在../view/RegisterForm呈現(xiàn)自身的組件中:


<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>

這會(huì)生成無(wú)限循環(huán),要解決此問題,只需更改導(dǎo)入組件的名稱:


<template>

  <RegisterForm1></RegisterForm1>

</template>


<script>

import RegisterForm1 from '@/components/RegisterForm1';

export default {

  components: {

    RegisterForm1

  },

  name: "RegisterForm"

}

</script>


<style scoped>

</style>


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
瀟瀟雨雨

TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊

App.vue 中的更改 =>


<template>

  <router-view />

</template>


<template>

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

</template>


查看完整回答
反對(duì) 回復(fù) 2023-08-24
  • 2 回答
  • 0 關(guān)注
  • 201 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)