Skip to content

Instantly share code, notes, and snippets.

@freearhey
Created November 22, 2016 14:39
Show Gist options
  • Save freearhey/96d91bd11d257c0300236af97b07792f to your computer and use it in GitHub Desktop.
Save freearhey/96d91bd11d257c0300236af97b07792f to your computer and use it in GitHub Desktop.
Изменение номера страницы в адресной строке с помощью vue-router
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