[ css ] column-count

.image-container {
column-count: 3;
column-gap: 0;
}
Advertisements

[ javascript ] axios : AJAX request

Example

import axios from 'axios';

axios.get('https://www.googleapis.com/youtube/v3/search', {
params: {
key: API_KEY,
type: 'video',
part: 'snippet',
q: searchTerm
}
}).then(response => console.log(response));

// response.data.items.0.id

// response.data.items.0.snippet

Example

import axios from 'axios';

axios.get(`${ROOT_URL}/3/account/me/images`, {
headers: {
Authorization: `Bearer ${token}`
}
});

// response.data : data by axios

Post

axios.post(`${ROOT_URL}/3/image`, formData, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      }

vue_router

if route URL : /oauth2/callback -> show some component

 

put the route inside main.js

import VueRouter from 'vue-router'

import AuthHandler from './components/AuthHandler'

 

Vue.use(VueRouter);

 

export const router = new VueRouter({

mode: 'history', // (optional) tell VueRouter to use browser router, not hash router
routes: [

{path: '/oauth2/callback', component: AuthHandler}
]
});

 

new Vue({
router,

..

});

 

App.vue template ( render router view here )

router-view></router-view

 

Hash Router : localhost:8080/#whatever1/whatever2 ( whatever1/whatever2 )

 

change the route to / without full refresh

store/modules/auth.js

import { router } from '../../main';

 

router.push('/')

 

change route to /whatever

components/AppHeader.vue

router-link to="/whatever">whatever<router-link

 

NOTE : router-link will not make full refresh

 

ref: https://github.com/vuejs/vue-router