VUE：使用分页时获取数据的问题

Question

我有一组可以访问第一页的数据。但是，一旦我使用分页并尝试按下一页，就无法访​​问数据。我收到401问题。

created(){
          this.fetchNotater();
        },
        methods: {
            fetchNotater(page_url){
                let vm = this;

// api/borgernotater works perfectly. But when i use the page_url then it wont accept my api_token

                page_url = page_url || 'api/borgernotater'; 
                fetch(`${page_url}?api_token=${window.Laravel.apiToken}`)
                    .then(res => res.json())
                    .then(res => {
                        this.notater = res.data;
                        vm.makePagination(res);
                    })
                    .catch(err => console.log(err))
            },
            makePagination(res){
                let pagination = {
                    current_page: res.current_page,
                    last_page: res.last_page,
                    next_page_url: res.next_page_url,
                    prev_page_url: res.prev_page_url
                };
                this.pagination = pagination;
            }

Answer 1

您的API请求URL构造中有一个错字：需要用&分隔参数。您会看到，在请求第2页时，您的网址中有两个问号，并且这是一个无效的查询字符串，并且API请求的网址将无法正确解析。应该是：?page=2&api_key=...。

考虑到这一点，使用第三方库（例如NPM上的查询字符串）来执行解析并将有效负载添加到查询字符串可能会有所帮助。