Vue 라우터

vue router

//main.js

import Vue from 'vue'
import App from '.App.vue'
import {router} from './routes/index.js'

new Vue({
	render: h=>h(App),
    router
}).$mount('#App')

//router은 위 코드에서 export 한 router 정보를 담고있는 변수이다.

main.js 는 애플리케이션의 설정들(플러그인&라이브러리,구조)들을 파악할 수 있는 설계도 느낌 

routes 폴더를 src 밑에 만들고 해당 폴더에 index.js 라는 파일을 생성하자 

VueRouter 객체는 router 에 대한 정보를 관리하는 vueRouter 객체 

//index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import BasicView from '../views/BasicView.vue'

Vue.use(VueRouter);

//Router 객체를 router에 받는다 router 에 Router 객체에 대한 정보가 담겨있음
export const router = new Router({
	routes: [
    	//path: url 주소
        //component: url 주소로 갔을 때 표시될 컴포넌트
        {
        	path: '/',
            	name: 'BasicView' // 라우터의 이름을 추가할 수 있다. this.$route.name으로 해당이름에 접근이 가능하다
        	component: 'BasicView'
        },
        {
        	path:'/',
            	component:''
        },
        {
        	path:'/',
            	component:''
        }
	]
});

src 밑에 views라는 폴더를 만든다. 

url 마다 뿌려지는 component를 등록한다.

 

//App.vue

<template>
	<div id='app'>
    	<router-view></router-view> // router-view 부분에 url에 따라 routes/index.js 에 설정된 컴포넌트들이 해당 위치에 오게 된다.
    </div>


</template>

redirect 속성

//index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import BasicView from '../views/BasicView.vue'

Vue.use(VueRouter);

export const router = new Router({
	mode: 'history' //history 모드로 등록시 url 에 들어간 # 표시를 제거해준다.
	routes: [
    	//path: url 주소
        //component: url 주소로 갔을 때 표시될 컴포넌트
        {
        	path:'/',
            redirect:'/scope'
        },
        {
        	path:'/scope',
            component:'BasicView'
        },
        {
        	path:'/',
            component:''
        }
	]
});

redirect 또한 vue 라우터에서 기본으로 제공해준다. path로 들어가면 밑의 redirect url 로 이동시켜 준다. 

 router-link

router-link는 vue 라우터 내부적으로 router-link를 화면에서 a (앵커)태그로 변환해줌 

<router-link to="/scope">T</router-link> //to 는 해당 요소 클릭시 이동하고 싶은 url 을 입력