创建Vue.js Unsplash分页可以按照以下步骤进行:
axios.get('https://api.unsplash.com/photos/random', {
params: {
count: 10, // 每页显示的图片数量
client_id: 'YOUR_UNSPLASH_ACCESS_KEY' // 替换为你的Unsplash Access Key
}
}).then(response => {
this.images = response.data;
}).catch(error => {
console.log(error);
});
请注意替换"YOUR_UNSPLASH_ACCESS_KEY"为你的Unsplash Access Key。
{
path: '/gallery/:page',
component: UnsplashGallery
}
changePage(page) {
this.$router.push('/gallery/' + page);
}
created() {
const page = this.$route.params.page || 1;
axios.get('https://api.unsplash.com/photos/random', {
params: {
count: 10,
page: page,
client_id: 'YOUR_UNSPLASH_ACCESS_KEY'
}
}).then(response => {
this.images = response.data;
}).catch(error => {
console.log(error);
});
}
import Vue from 'vue';
import VueRouter from 'vue-router';
import UnsplashGallery from './components/UnsplashGallery.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/gallery', component: UnsplashGallery },
{ path: '/gallery/:page', component: UnsplashGallery }
];
const router = new VueRouter({
routes
});
new Vue({
router
}).$mount('#app');
以上就是创建Vue.js Unsplash分页的步骤。在实际应用中,你可以根据具体需求进行进一步的优化和扩展,例如添加搜索功能、图片详情页等。同时,你也可以根据需要选择腾讯云的相关产品来支持你的Vue.js Unsplash分页应用,例如腾讯云的对象存储 COS(https://cloud.tencent.com/product/cos)用于存储图片,或者腾讯云的云函数 SCF(https://cloud.tencent.com/product/scf)用于处理分页请求等。
领取专属 10元无门槛券
手把手带您无忧上云