국비지원 53일차 vue Router 기본 사용법, $route와 $router의 차이

vue-router
1
router를 사용하기 위해선 package를 설치해야한다 개발서버를 끄고 
npm i vue-router라고 명시하자 
package.json파일에 vue-router 라우터가 제대로 설치되었는지 확인한다 
2
src 폴더에 router를 관리할 폴더를 만든다 필자는 routes라고 작명했다 
3
routes폴더에서 route를 관리할 파일을 만들어 준다 
필자는 index.js라 작명했다
4 
route를관리하는 파일인 index.js에서 router를 사용하기 위한 설정을 해준다 
ex)

import { createRouter, createWebHistory } from "vue-router";
//router를 사용할 수 있게 만들어주는 method를 vue-router페키지에서
//구조분해할당으로 createRouter만 가져온 코드
import Home from "./Home.vue";
import About from "./About.vue";

export default createRouter({
  history: createWebHistory(),
  //history모드와 hash모드 둘중 어떤 모드를 사용 할 것인지 명시하는 영역이다

  //vue에서 router를 보여주는 방식은 2가지가있는데
  //1 hash 모드

  // vue-router의 기본모드이다

  //router경로에 #이붙어 한페이지에서 이동하는 개념인 SPA(singlePageApplication)로 동작한다
  //때문에 경로이동시 페이지를 다시 로딩하지않는다

  //hash모드 사용을 원한다면 vue-router로 부터 createWebHashHistory를 가져와 history옵션에 명시해야한다

  //2 history모드
  //router경로에 #이 붙지않는다
  //페이지가 재로딩 되는 단점이있다
  //router는 단일페이지(SPA) 이기때문에 #(해쉬)없이 경로접근을하면 애러가 날수 있다
  //때문에 history모드는 배포시 해쉬모드로 동작해하기때문에 서버셋팅이 필요하다
  //history모드 사용을 원한다면 vue-router로 부터 createWebHistory를 가져와 history옵션에 명시해야한다

  routes: [
    {
      path: "/",
      //컴포넌트에 경로를 등록 해 주는 옵션이다
      // 경로에 '/'이라 명시하면 앞에 명시해야하는 도메인주소를 생략 할 수있다.
      component: Home,
      //path에 명시한 경로로 접근했을때 보여질 컴포넌트를 등록하는 옵션이다
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

5 vue를 만들어주는 파일 여기선 main.js파일에서 router 설정파일을 import하고
use메소드(플러그인을 연결해주는 기능을함)를 이용해 프로젝트에 연결한다 
ex)

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./routes/index";
createApp(App).use(router).mount("#app");

6 등록된 route가 화면에 보여지길 원한다면 컴포넌트에서 <RouterView/> 태그를 만들어 준다

7 router에 등록된 컴포넌트는 경로를 가지는데 해당 경로로 이동할때에는 router-link라는 태그를 사용한다
이때 to라는 속성을 가지는데 여기서 to는 작성한 경로로 이동 시켜주는 기능을 가지고,
active-class속성은 해당 경로로 이동되었을때 router-link태그에 부여할 스타일을 적용 할 수 있다 
즉 router-link는 a태그와 유사한 기능을한다 

ex)

<template>
  <router-link to="/" class="btn" active-class="active" >HOME</router-link>
  <router-link to="/about" class="btn" active-class="active" >About</router-link>
  <RouterView/>
</template>

---

$router와 $route의 차이

router를 사용하면 2가지 객체를 받을 수 있다  
1$router
전반적으로 router기능을 관리하는 객체데이터이다 프로젝트전체에서 하나만 존재한다 
 ex)

 mounted(){
  console.log('route:',this.$route)
  console.log('router:',this.$router)
 }

위와같이 router와,route 객체를 콘솔창에 띄워 어떤 내용이 들어가는지 확인하는것도 좋은방법이라 생각한다
go(n) - 히스토리 단계에서 n 단계 이동. window.history.go(n)과 비슷함

back() - 히스토리에서 한 단계 돌아감. history.back()과 같음

foward() - 히스토리에서 한 단계 앞으로 나아감.

addRoute(routes) - 라우터에서 동적으로 라우트를 추가

currentRoute - 현재 라우트에 대한 Route 객체

mode - 라우터 모드

push - 페이지 이동 실행. 히스토리에 새 엔트리를 추가하고 브라우저에서 뒤로 가기 버튼이 눌리면 앞의 URL로 돌아감.

2$route
현재 활성화된 Route의 상태를 저장하는 객체데이터이다 

path - 현재 라우트의 경로를 나타내는 문자열.

params - 정의된 URL 패턴과 일치하는 파라미터의 키-값 쌍을 담고 있는 객체. 파라미터가 없다면 빈 객체.

query - 쿼리 문자열의 키-쌍 값을 담고 있는 객체. 쿼리가 없다면 빈 객체. (경로가 /foo?user=1 이면 $route.query.user == 1이 된다.

hash - 현재 URL에 URL 해시가 있을 경우 라우트의 해시값을 갖는다. 해시가 없다면 빈 객체

fullPath - 쿼리 및 해시를 포함하는 전체 URL

name - 이름을 가진 라우트인 경우 라우트의 이름