Created
November 22, 2016 14:39
-
-
Save freearhey/96d91bd11d257c0300236af97b07792f to your computer and use it in GitHub Desktop.
Изменение номера страницы в адресной строке с помощью vue-router
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var appId = UNSPLASH_APP_ID_HERE | |
// создаем новый экземпляр vue-router | |
var router = new VueRouter() | |
new Vue({ | |
el: '#app', | |
// подключаем router к vue | |
router, | |
data: { | |
photos: [], | |
totalPhotos: 0, | |
perPage: 9, | |
currentPage: 1 | |
}, | |
methods: { | |
fetchPhotos: function(page) { | |
var options = { | |
params: { | |
client_id: appId, | |
page: page, | |
per_page: this.perPage | |
} | |
} | |
this.$http.get('https://api.unsplash.com/photos', options).then(function(response) { | |
this.photos = response.data | |
this.totalPhotos = parseInt(response.headers.get('x-total')) | |
this.currentPage = page | |
// при изменении страницы с помощью vue-router меняем номер страницы в url | |
router.push({ path: '/', query: { page: page }}) | |
}, console.log) | |
} | |
}, | |
created: function() { | |
// при первой загрузке с помощью vue-router получаем номер страницы из url | |
// если он передан | |
var page = parseInt(this.$route.query.page) || 1 | |
this.fetchPhotos(page) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment