Question

我正在尝试使用vuetify分页组件和nuxt.js构建分页，但不适用于服务器端渲染。

我使用来自https://github.com/vuetifyjs/vuetify/issues/4855的代码添加了nuxt.js链接。它在客户端工作，但在服务器端返回错误“未在组件中定义的渲染功能或模板：匿名”

有人知道如何建立正确的SSR分页或如何解决我的解决方案吗？

Answer 1

不知道该线程是否仍然有效，但这是我使用nuxt进行分页的解决方案。

 <script>
import PostList from "@/components/site/PostList";
import axios from "axios";
export default {
  components: {
    PostList
  },
  watchQuery: ["page"],
  async asyncData({ $axios, query }) {
    try {
      const page = query.page || 1;
      let { data } = await $axios.get("/articles/?page=" + page);
      return {
        posts: data.data,
        page: data.current_page,
        totalPages: data.last_page
      };
    } catch (e) {
      //  console.log(e); display errors
    }
  },
  methods: {
    next() {
      this.$router.push({ query: { page: this.page } });
    }
  }
};
</script>

<template>
      <v-pagination v-model="page" :length="totalPages" @input="next"></v-pagination>
</template>

验证SSR分页

1 个答案: