Vue Router

• 페이지를 컴포넌트로 구분 후 각 페이지간 이동을 위해 사용! ⇒ SPA 실현

• routes는 페이지들, 그걸 제어하는게 rotuer라고 생각하면 편함

0. 설치

• this.$route 객체로 현재 페이지 정보에 접근 가능
• ex. this.$route.params.동적파라미터이름

1. createRouter 로 라우터 생성

• createRouter({history, routes}) 형태

• routes는 {path, component: } 의 배열 형태

import { createRouter, createWebHashHistory } from "vue-router";
import Hello from '~/components/Hello/Hello'
import Info from './Info'
import NotFound from './NotFound'

export default createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/hello',
            component: Hello
        },
        {
            path: '/info',
            component: Info
        },
				{
            path: '/:notFound(.*)',
            component: NotFound
        }
    ]
})

• vue-router는 지정되지 않는 경로는 자동으로 App.vue를 보게함
• /:notFound(.*) 로 404페이지를 지정할 수 있다
• :notFound : 파라미터는 콜론 :으로 표시, 즉 notFound라는 파라미터라는 뜻. 동적이름이다
• (.*) : 모든 문자. 파라미터 바로 뒤에 괄호 안에 정규식을 추가하여 모든 것과 일치시키는 맞춤 파라미터를 사용
 

2. router를 전역으로 등록

3. 컴포넌트에서 페이지 이동 기능 구현

• <RouterLink> 컴포넌트 ⇒ 페이지 링크 버튼
• a태그와 같은 역할
• to 속성으로 path 지정

<template>
	<RouterLink to="/home">home</RouterLink>
	<RouterLink :to="{name: 'home'}">home</RouterLink>
</template>

• 옵션을 지정해서 쿼리파람과 쿼리스트링을 줄 수 있다

<template>
	<RouterLink to="/home/7777?name=Leon&age=85&email=abc@gmail.com">Home</RouterLink>
	
	<RouterLink :to="{
				name:'home', 
				params: {id: 7777}}
				query: { name: 'Leon', age: 85, email: 'abc@gmail.com'}
			}">
			Home
	</RouterLink>
</template>

• <RouterView> 컴포넌트 ⇒ RouterLink로 이동한 페이지를 렌더링하는 뷰
• RouterLink와 같은 템플릿 내에서 선언하지 않아도 됨

<template>
	<RouterLink to="/home">home</RouterLink>
	<RouterView /> //home으로 이동한 결과를 여기에 등록
</template>

1. path를 매개변수로

<template>
	<button @click="$router.push('/home')"></button>
	<button @click="$router.push({name: 'home'})"></button>
</template>

각 route에 name 속성 지정하기

• {name: 라우트이름} 을 매개변수로

• push({name: 라우트이름} 나 <RouterLink :to={name: 라우트이름} 로 페이지 이동 가능

// routes/index.js        
{
    path: '/info',
		name: 'info',
    component: Info
},

...

// App.vue
<template>
  <RouterLink to="{name: 'info'}">
    Info
  </RouterLink>
  <button @click="$router.push({name: 'info'})">
    Info
  </button>
  <RouterView />
</template>

세부 페이지 지정하기 (ex. 경로/세부경로로 이동했을 때)

1. 부모 route 객체에 children 속성을 추가
• 자식 라우터 등록 (부모와 같이 {path, component} 객체 형태)
• children 경로에는 부모 path를 제외해야하고, 시작 /를 붙이지 않음에 주의

2. 부모 컴포넌트에서 RouterView 로 출력

    routes: [
        {
            path: '/hello',
            component: Hello
						children: [
							{
								 path: ':id',
			           component: HelloDetail
							}
						]
        },

<template>
	<RouterView />
</template>

• childeren 라우트를 따로 등록(full path를 적어야 함)
⇒ 해당 주소로 갔을 때, 부모 page는 렌더되지 않음

routes: [
    {
        path: '/hello',
        component: Hello
    },
		{
			 path: '/hello:id',
       component: HelloDetail
		}
..
		]

Vue Router 모드

1. Hash 모드
• 주소 도메인 뒤에 ‘/#’가 붙음. 도메인/#/~~
• 사실 index.js 한페이지로 대응 ⇒ SPA

2. HTML5 모드 ⇒ 도메인/~~
• 모든 페이지를

1. routes/index.js

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

export default createRouter({
    history: createWebHashHistory(),
..

1. 이후엔 상단에 vue-router 과정과 동일함

1. routes/index.js

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

export default createRouter({
    history: createWebHistory(),
..

1. webpack.config에서 output의 publickPath 지정
• publickPath가 없다면, 빌드된 index.html에서 스크립트 경로가 main.js 로만 될 것임. == ./main.js
⇒ 상대경로로 올바르지 않음
• publickPath: '/' 로 지정함으로써, src=”/main.js”로 절대경로가 될 것임

2. webpack.config에서 서버 옵션에 historyAPiFallback: true 추가
⇒ 세부 페이지로 요청시, index.html로 이동하도록 함
⇒ routes에 등록된 페이지는 잘 나옴

devServer: {
	historyAPiFallback: true
}

• 주의) 실제 서버일 때는 devServer 대신 실제 서버에 옵션을 지정해줘야 함
 

---

Vue Router 가드

const router = createRouter({}) 로 라우터 생성했다고 가정
 
1. router.beforeEach((to, from) ⇒ {})
• 페이지가 from에서 to로 이동하기 전에 실행하는 로직을 지정 (ex. 인증처리)
• 함수 안에서 return ‘경로’ 로 페이지 이동 가능
• to, from은 this.$route와 비슷한 형태로 도착 페이지의 정보를 제공
2. router.afterEach((to, from) ⇒ {})
• 페이지가 from에서 to로 이동한 후에 실행하는 로직을 지정
 
3. routes의 각 객체들에서 beforeEnter 속성을 추가해줄 수 있다 ⇒ 해당 라우트에 이동하기 전에 실행하는 로직 지정

function abc(to) {}
function beffore(to) {}

routes: [
    {
        path: '/hello',
        component: Hello,
				beforeEnter: [abc, beffore]
    },
]

 
4. 컴포넌트 안에서도 가드를 사용할 수 있다
• 관리가 복잡해지기 때문에 되도록이면 사용하지 않는 것을 권장
• beforeRouteEnter(to, from) {}
• 페이지에 들어오기 전, this 지정 불가
• beforeRouteUpdate(to, from) {}
• 페이지가 업데이트 되기 전, this 지정 가능
• beforeRouteLeave(to, from) {}
• 페이지를 떠나기 전, this 지정 가능
 
• 가드 실행 순서



 
 

vue Router 메타 필드

• routs의 meta 옵션을 줘서 단순히 정보를 추가할 수 있다
• 단순히 정보이기 때문에, 객체 속성은 아무것이나 될 수 있다
• beforeEach에서 to.meta 처럼 meta에 접근할 수 있다

export default createRoutor({
	..
	routes: [
	    {
	        path: '/hello',
	        component: Hello
					children: [
						{
							 path: 'new',
		           component: HelloNew,
								meta: {requiresAuth: true}
						},
						{
							 path: ':id',
		           component: HelloDetail,
								meta: {requiresAuth: false}
						}
					]
	    },
})

import router from './index'
import store from '~/store' //여기는 앱 컴포넌트가 아니라서, 전역 등록과 상관 없음

router.beforeEach((to, from) => {
	if (to.meta.requiresAuth && !store.state.user.isLoggedIn) {
			return {
				path: '/login' //로그인이 안되어 있다면 로그인 페이지로 이동
				query: {redirect: to.fullPath } //로그인 후에 갈 페이지 지정
		}
	}
})

import '~/routes/guard' //가져오기만 하면 됨

 
• route객체 처럼 router 객체에서도 페이지 정보를 얻어올 수 있다 ⇒ router.currentRoute !!
 
 

Vue Router 스크롤 동작

• SPA 때문에 페이지가 바뀌어도 스크롤이 유지된다
• router에 scrollBehavior(to, from, savedPosition) 메서드를 추가한다
• savedPosition : 저장된 위치
• 스크롤 위치 객체를 리턴한다
• el : 기준 셀렉터
• left / top : 위치(음수도 됨)

export default createRoutor({
	..
	scrollBehavior(to, from, savedPosition) {
		return { top: 0 } //항상 맨 위로
	},
	routes: [
	..
}