05.Vue Router

---

vue-router-next 자세히 보기..

• vue.js 설치 시 next 키워드를 붙여서 vue.js 최신 버전인 3버전과 호환 되기 위해서 vue router 도 마찬가지로 next 를 뒤에 붙여서 사용합니다.

• $ npm install vue-router@4 - vue router 4버전 일반 의존성 설치 (개발자 설치가 아님) -> 실제 브라우저에서 보여주는 page를 만들었기 때문에 일반 의존성 설치

Vue Router 기본 설정

• 기본 설정은 이전 블로그에서 webpack packge 설정된 환경에서 진행 되었습니다 vue template with webpack by Jacob

// in index.js 에서 설치 

import { createApp } from 'vue' // 가지고 올때 객체 분해를 통해 바로 createApp 를 가져옴
import App from './App'
import router from './routes/index.js' //  routes index 에서 가져 오는것

// App.vue 가 project 에 시작이 되는것을 설정
createApp(App)
  .use(router) // routes index.js 를 가져와서 createApp에서 사용한다는 것임 - 플러그인 연결
  .mount('#app') // app이라는 ID 값을 가지고 있는 곳에 vue.js 프로젝트를 연결 한다는 개념임

• src -> route 경로에서 main.js 파일 생성해서 페이지를 관리해주는 구성파일 생성

// in main.js 

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './home' // 상대 경로에서 home.vue 파일 import
import About from './about' // 상대 경로에서 about.vue 파일 import

export default createRouter ({
  // Hash , history mode 두가지 중에  hash mode 를 사용
  // hash 모드는 특정 주소 도메인 뒤에 # hash 기호를 사용해서 페이지로 접근하는것 예) https://google.com/#/search 
  history: createWebHashHistory(),
  // website 의 페이지를 구분해주는 것
  routes : [
    {
      path: '/', //  main page path 설정
      component: Home // import 된 home 연결
    },
    {
      path: '/about', // 도메인주소/about 으로 path 설정
      component: About // import 된 about 연결
    }
  ]
})

• src -> route 경로에서 Home.vue 와 About.vue 파일 생성

// in home.vue

<template>
  <h1>Home!</h1>
</template>

// in about.vue

<template>
  <h1>About!</h1>
</template>

• App.vue 에 Router view 연결

// in App.vue
<template>
  <RouterView />
</template>

RouterView

• 페이지가 출력 (렌더링) 되는 영역 component, 즉, 변경하는 page 가 출력되는 하나의 영역입니다.

RounterLink

• 페이지 이동을 위한 링크 component

$route, $router

• component 내부에서 this 를 통해 접근할 수 있는 객체 데이터 형태 입니다.

  • $route : route(페이지) 정보를 가지는 객체, fullPath (접근된 해당 페이지의 전체 경로), params(접근된 페이지의 parameter 정보) 등을 사용해서 페이지의 정보를 조회 하는 객체 입니다. 속성을 이용해서 데이터를 조회 하는 용도로 주로 사용됩니다.

  • $router: route(페이지) 조작을 위한 객체. 대표적으로 push 라는 method 을 사용해서 페이지 이동을 만들수 있습니다. 메소드 들이 들어 있어서 특정한 함수를 실행 시켜서 동작을 일으키는 기능을 가지고 있습니다

🔶 🔷 📌 🔑

Reference

• Vue Router next - https://next.router.vuejs.org/installation.html