, 태그만 넣으면 전부다 빈화면으로 변합니다.

[김호두]

App.vue 코드

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    Navbar
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        Home <span class="sr-only">(current)</span>
        Features
        Pricing
        Disabled
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <h5>React 개발자의 블로그입니다.</h5>
    <p>- Vue 로 만들었음 -</p>
  </div>

  <router-view :블로그글="블로그글"> </router-view>

</template>

<script>

import blog from './assets/blog.js';

export default {
  name: 'App',
  data() {
    return {
      블로그글 : blog,
    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-left: 30px;
  margin-right: 30px;
}
</style>

 

- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

router.js (경로 src 확인시 맞음

import { createWebHistory, createRouter } from "vue-router";
import ContentList from "@/components/ContentList.vue";

const routes = [
    {
        path: "/list",
        component: ContentList,
    }

];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

- - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

main.js

import { createWebHistory, createRouter } from "vue-router";
import ContentList from "@/components/ContentList.vue";

const routes = [
    {
        path: "/list",
        component: ContentList,
    }

];

const router = createRouter({
    history: createWebHistory(),
    routes,
});
export default router;

- - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

 

ContentList.vue (멀티단어 조건 땜시 강의와는 다르게 컨텐츠리스트라고 이름지었씀니다)

<template>
  <div v-for = "(blogContents, i) in 블로그글" :key="i">
    <h5>{{블로그글[i].title}}</h5>
    <p>{{블로그글[i].date}}</p>
    나오는거맞냐?
  </div>
  <p>아 안나오는걸까..?ㅠ</p>

</template>

<script>
export default {
  name: "ContentList.vue",
  props : {
    블로그글 : Array,
  }
}
</script>

<style scoped>

</style>



npm instal router 할 당시에 따로 에러가 떴다거나 하는 것은 없었습니다.

app.vue 에 아래 코드를 넣으면 전부다 사라집니다.
<router-view :블로그글="블로그글"> </router-view>

반대로 라우터뷰 태그를 지우면 전부다 다시 보이구용...!

[김호두]

보시면 답변 부탁드립니다 선장님!

[codingapple]

크롬콘솔창에 뭐 안뜨나 확인해보거나 props없이 써봅시다

[김호두]

p.js:407 Uncaught TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (runtime-dom.esm-bundler.js:36:1)
    at removeFragment (runtime-core.esm-bundler.js:6208:1)
    at remove (runtime-core.esm-bundler.js:6173:1)
    at unmount (runtime-core.esm-bundler.js:6142:1)
    at unmountComponent (runtime-core.esm-bundler.js:6230:1)
    at unmount (runtime-core.esm-bundler.js:6115:1)
    at patch (runtime-core.esm-bundler.js:5088:1)
    at render (runtime-core.esm-bundler.js:6278:1)
    at mount (runtime-core.esm-bundler.js:4474:1)
    at app.mount (runtime-dom.esm-bundler.js:1607:1)
n

콘솔창에는 이렇게 뜹니다! gpt 나 다른데에 검색해봤는데 어찌해야할지 모르겠네요ㅠ

[김호두]

prop 없이 써봤는데도 반응은 없습니다!

[김호두]

기존 코드에서 다음 변경 사항을 적용했습니다:

router.js 파일에서 ContentList 컴포넌트에 props를 추가했습니다. 이렇게 하면 라우터를 통해 컴포넌트에 데이터를 전달할 수 있습니다.
javascriptCopy code
props: (route) => ({ 블로그글: route.params.블로그글 }),

App.vue 파일에서 router-view 태그에 있는 :블로그글="블로그글" 속성을 삭제했습니다. 이제 router.js에서 props를 통해 데이터를 전달하므로, 이 속성은 필요하지 않습니다.
htmlCopy code
<router-view></router-view>

main.js 파일에서 다음과 같이 코드를 변경하여 앱 인스턴스를 만들고, provide 메서드를 사용하여 블로그글 데이터를 라우터로 전달하도록 했습니다.
javascriptCopy code
const app = createApp(App);

app.provide("블로그글", app.config.globalProperties.블로그글);

app.use(라우터만든거).mount("#app");

이렇게 변경한 결과, 라우터를 사용하여 컴포넌트를 전환하면서도 블로그글 데이터를 전달할 수 있게 되었습니다. 이전 코드에서는 router-view에 직접 데이터를 전달하려고 시도했으나, 이 방식은 작동하지 않았습니다. 변경된 코드에서는 라우터를 통해 컴포넌트에 데이터를 전달하는 방식을 사용하였습니다.

지피티에게 코드를 주고 부탁했더니, 위와 같은 과정으로 해결해줬읍니다. 감사합니다

[codingapple]

main.js 등에 라우터 설치셋팅하는 코드가 잘못되면 가끔 그런에러 뜹니다

[김호두]

감사합니다!

[글쓴이]

글