[웹] Vue.js(3)

Vue.js

 

axios

• CDN 설치방식
  • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• NPM 방식
  • npm install axios

axios 대표 API

• axios.get('URL 주소').then().catch()
  • 해당 URL주소에 GET 요청을 보내고 성공하면 then 로직을 수행, 실패하면 catch 로직을 수행합니다.
• axios.post('URL 주소').then().catch()
  • 요청 방식만 POST이고 나머지는 GET 방식과 동일합니다.

axios
	.get('/list')
	.then((response) => {
		this.aptList = response.data.response.body.items.item;
	})
	.catch((error) => {
		console.dir(error);
	});​

 

axios를 이용한 Spring REST API와의 통신

const addr = 'http://localhost:8097/hrmboot/api'

axios
	.get(addr)
    .then((response) => {
    	this.aptList = response.data.response.body.items.item;
	})
    .catch((error) => {
    	console.dir(error);
    });

 

 

vue-router

• CDN 설치방식
  • <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
• NPM 방식
  • npm install vue-router

 

vue-router 연결

// 라우트 컴포넌트
import Main from './components/Main.js';
import Board from './components/Board.js';

// 라우터 객체 생성
const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'main',
      component: Main,
    },
    {
      path: '/board',
      name: 'board',
      component: Board,
    },
  ],
});

 

vue-router 이동 및 렌더링

• 네비게이션을 위해 <router-link>를 사용합니다.
• 속성은 'to' prop을 사용합니다.

<router-link to="/list">목록</router-link>

 

$router, $route

const router = new VueRouter({
	routes: [
    	{
        	path: '/list/:id',
            component: SearchList,
		},
	],
});

// 전체 라우터 정보
// this.$router

// 현재 호출된 해당 라우터 정보
// this.$route
// this.$route.params.id
// this.$route.paht