[part2-5] Nested routes & push 함수

 

 

App.vue

<template>


  <router-link to="/">Home</router-link>
  <router-link to="/list"> 리스트 페이지</router-link>
  <router-link to="/detail"> 상세 페이지</router-link>

  <div class="mt-4">
    <router-view :블로그글="blogData"></router-view>
  </div>

</template>

<script>

import data from "./assets/data.js";

export default {
  name: "App",
  data() {
    return {
      blogData: data,
    };
  },
  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-top: 60px;
}
</style>

 

 

router.js

import { createWebHistory, createRouter } from "vue-router";
import List from './components/List.vue'
import Home from './components/Home.vue'
import Detail from './components/Detail.vue'
import Author from './components/Author.vue'
import Comment from './components/Comment.vue'

const routes = [
  {
    path: "/detail/:id(\\d+)",
    component: Detail,
    children: [
      {
        path: "author",
        component: Author,
      }, {
        path: "comment",
        component: Comment,
      }

    ]
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Home,
  },
  // {
  //   path: "/:anything(.*)",//모든 문자 : 정규식 문법
  //   component: Home,
  // }

];

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

export default router;

 

 

List.vue

<template>
  <div>
    <h5 @click="$router.push('/detail/0')">{{ 블로그글[0].title }}</h5>
    <p>{{ 블로그글[0].content }}</p>
  </div>
  <div>
    <h5 @click="$router.push('/detail/1')">{{ 블로그글[1].title }}</h5>
    <p>{{ 블로그글[1].content }}</p>
  </div>
  <div>
    <h5 @click="$router.push('/detail/2')">{{ 블로그글[2].title }}</h5>
    <p>{{ 블로그글[2].content }}</p>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    블로그글: Array,
  },
  data() {
    return {};
  },
};
</script>

<style></style>

0,1,2 로 하드코딩을 자동으로 어떻게 바꾸지?

 

 

 

https://iancoding.tistory.com/212

 

List.vue

<template>
  <div v-for="(작명, i) in 블로그글" :key="작명">
    <!-- <p>{{ 작명 }}</p> -->
    <h5 @click="$router.push('/detail/' + i)">{{ 작명.title }}</h5>
    <p>{{ 작명.content }}</p>
  </div>
  <!-- <div>
    <h5 @click="$router.push('/detail/1')">{{ 블로그글[1].title }}</h5>
    <p>{{ 블로그글[1].content }}</p>
  </div>
  <div>
    <h5 @click="$router.push('/detail/2')">{{ 블로그글[2].title }}</h5>
    <p>{{ 블로그글[2].content }}</p>
  </div> -->
</template>

<script>
export default {
  name: "List",
  props: {
    블로그글: Array,
  },
  data() {
    return {};
  },
  methods: {
    // edit() {
    //   this.$router.push(`/detail/${this.작명[i]}`);
    // },
  },
};
</script>

<style></style>