Router-view 사용하기

1. Vue Router 설치

npm install vue-router

 

2. View폴더를 생성하고 그 안에 HomeView.vue를 생성

 

3. router 초기설정 하기

- 위 사진과 같이 router.js를 생성하여 아래의 코드를 입력한다.

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "HomeView",
    component: () => import("./View/HomeView.vue"),
  },
];

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

export default router;

 

4. main.js 설정

- 아래와 같이 코드를 입력해주면 된다.

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");

 

4. App.vue

- 위와 같이하면 이렇게 라우터 뷰를 뿌릴때 화면이 나타나게 된다.

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style></style>