Route
url에 따라 보여줄 vue를 정하자

Route

localhost 로 접속하면 Home에 관한 화면이 나오고
localhost/about으로 접속하면 about에 관한 화면이 나오게 하자

image
input에 값을 입력할때마다 부모의 데이터 username이 반응형으로 잘 나타난다


설정

index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    component: HomeView,
  },
  {
    path: '/about',
    component: AboutView,
  },
];

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

export default router;

적용할 Route View

HomeView.vue


<template>
  <div>
    <h2>Home View</h2>
    <p>{{ $route.path }}</p> // /출력
    <botton class="btn btn-primary" @click="$router.push('/about')">
      About으로 이동
    </botton>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

</script>

AboutView.vue


<template>
  <div>
    <h2>About View</h2>
    <p>{{ $route.path }}</p>
    <botton class="btn btn-primary" @click="goHomePage"> Home으로 이동 </botton>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const goHomePage = () => {
  router.push('/');
};
</script>

<style lang="scss" scoped></style>

</script>

App.vue

<script setup>
import TheHeader from '@/layout/TheHeader.vue';
import TheView from '@/layout/TheView.vue';
</script>

<template>
  <TheHeader></TheHeader>
  <TheView></TheView>
</template>

<style scoped></style>

적용될 곳

TheView.vue

<template>
  <main>
    <div class="container py-4">
      <RouterView></RouterView>
    </div>
  </main>
</template>

<script setup></script>

<style lang="scss" scoped></style>

TheHeader.vue

<template>
  <header>
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Chan Post</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <RouterLink to="/" class="nav-link" active-class="active"
                >Home</RouterLink
              >
            </li>
            <li class="nav-item">
              <RouterLink to="/about" class="nav-link" active-class="active"
                >About</RouterLink
              >
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup></script>

<style lang="scss" scoped></style>

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “실전편”

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...