Vue로 블로그 만들기 - 3.라우팅

vue-router 설치하기

• run serve되고있던 터미널 종료 후 새 터미널을 연다
• 아래 명령어를 입력한다.

npm install vue-router@4

 

라우터 셋팅하기

• src 폴더 하위에 router.js를 만들어 아래 코드를 복붙한다.

import { createWebHistory, createRouter } from "vue-router";
import 컴포넌트명 from "./components/컴포넌트.vue";

const routes = [
  {
    path: "/경로", //이 경로로 접속을 하면
    component: import해온 컴포넌트, //이 컴포넌트를 보여줘!
  }
];

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

export default router;

 

main.js에 라우터 파일 import하기

import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import router from "./router";

createApp(App).use(router).mount("#app");

 

App.vue에서 <router-view>표시하기

• <router-view></router-view>는 라우터로 설정한 컴포넌트(List)를 보여줄 자리이다.

 <template>
 
 	...생략
  <router-view :blogData="blogData"></router-view>
  
  <!-- List 컴포넌트는 이제 필요 없으니 삭제한다. -->
  <!-- <List :blogData="blogData" /> -->
  
</template>

<script>
// import List from "./components/List.vue"; 삭제
import data from "./assets/blog.js";

export default {
  name: "App",
  data() {
    return {
      blogData: data,
    };
  },
  components: {
    // List: List, 삭제
  },
};
</script>

<style></style>

 

페이지 이동 링크 만들기

• HTML에서 <a>태그와 같은 역할을 하는 Vue만의 특별한 태그가 있다.
• <a>태그처럼 <router-link>로 감싸주고 to="경로"를 설정해주기만 하면 된다.

<router-link to="/list">list로 이동하기</router-link>