• Nuxt.js loads more, updates data to the browser later, can see nuxt.js server render axios(@nuxtjs/axios) and pr…

  • Figuring out how axios and @nuxtjs/ AXIos are configured and requested will allow you to load more data through the interface, but you just need to distinguish between server rendering and configuration processing in a local browser request.

Below is the old way, can need not see, it doesn’t matter value, serve as reference only!!

A list,

  • In server rendering mode, the common way to get data in pages is:

    • All server data is returned to the front-end for self-processing

    • Request data asynchronously and append label elements locally

    • Links are obtained with paging parameters

Second,URL with paging parameters to get data in pages

  • Case 1: The current page is paged to obtain data

    <template> <div class="content-view"> <! <a-list class="list-view" item-layout="horizontal" :data-source="data"> < A-list slot="renderItem" slot-scope="item"> {{ item }} </a-list-item> </a-list> <! </a-button> </div> </template> <script> export default {data() {return { // Data: [], // current page: This $route. Query. Page | | 0}}, / / listen to page parameter changes in the route query to call asyncData, field parameters can be customized watchQuery: ['page'], // asyncData({query, params}) {console.log(query, params}) Const page = (query.page? Number(query.page) : 0) + 1 const datas = [] for (let index = 0; index < page; Index ++) {datas.push(index)} return {data: datas}}, methods: This.$router. Push ({name: 'index', params: {id: 1}, query: {page: this.page + 1 } }) } } } </script> <style> .content-view { margin: 0 100px; } </style>Copy the code

  • Case 2: Paged fetch data sub-component presentation

    Parent component – Route page index.vue

    <template> <div class="content-view"> <! --> <Dzm :data="data"></Dzm> <! </a-button> </div> </template> <script> export default {data() {return { // Data: [], // current page: This $route. Query. Page | | 0}}, / / listen to page parameter changes in the route query to call asyncData, field parameters can be customized watchQuery: ['page'], // asyncData({query, params}) {console.log(query, params}) Const page = (query.page? Number(query.page) : 0) + 1 const datas = [] for (let index = 0; index < page; Index ++) {datas.push(index)} return {data: datas}}, methods: This.$router. Push ({name: 'index', params: {id: 1}, query: {page: this.page + 1 } }) } } } </script> <style> .content-view { margin: 0 100px; } </style>Copy the code

    Sub-component DZM. vue page data updated

    <template> <! < A-list class="list-view" item-layout="horizontal" :data-source="dataSource"> < A-list slot="renderItem" Slot-scope ="item"> {{item}} </a-list-item> </a-list> </template> <script> export default {// Props: {data: {type: Array, default: () => []}}, watch: {// Listen for data changes and reassign to the current data source for display data: {handler (val) {this.dataSource = val}, immediate: true}}, data () {return {// [] } } } </script> <style> </style>Copy the code

  • The above two methods of paging data acquisition have the same effect

Three, do not refresh the page, asynchronous request data, the page to add data

  • This scheme is afraid of using a third-party UI framework, either pure splicing, or find whether the library supports CDN use, if there will be a lot of convenience.

  • Nuxt introduces an external CDN plug-in configuration

    <template> <div class="content-view"> <! </a-button> </div> </template> <script> export default {methods: {/ / switch data paging touchMore () {/ / the current page main view const contentView = document. The getElementsByClassName (' content - view) [0] / / create a new tag var div = document.createElement("div"); Div. InnerText = "request data asynchronism, do not refresh the page, append data" // append to the specified content position contentView.appendChild(div); } } } </script> <style> .content-view { margin: 0 100px; } </style>Copy the code