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 won't 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页时，你的URL中有两个问号，这是一个无效的查询字符串，API请求URL将不会被正确解析。应该是：?page=2&api_key=...。

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