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

pinia기본

May 05 2023

src/main.js ```js import { createPinia } from ‘pinia’;

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