3. view

3.1 default layout

• ~/layouts/default.vue

3.2 custom layout

• Step 1: create a file under the ~ / layouts folder

  • ~/layouts/blog.vue
  • Note that there must be a < / nuxt > tag, which is equivalent to the < / router View > you learned before

• Step 2: introduce in the page

  • If not imported, the default layout is used by default

    <script>
    export default {
      layout: 'blog'
    }
    </script>
    
    

3.3 error page

• It can realize personalized processing of error information

• Implementation mode 1:

  • Create ~ / layouts/error.vue file

    <template>
      <div>
          <!-- Error message object -->
    
        {{ error }}
      </div>
    </template>
    
    <script>
    export default {
        //  Get error message object
      props: ['error']
    }
    </script>
    

• Implementation mode 2:

  • Create ~ / pages /. Vue file

    <template>
      <div>
          <!-- Error message object -->
        {{ error }}
      </div>
    </template>
    
    <script>
    export default {
        //  Get error message object
      props: ['error']
    }
    </script>
    

4. axios

4.1 ordinary axios

• Configure unified path in nuxt.config.js

   axios: {
      baseURL:'http://localhost: port number / routing prefix '
    }
  

• Method call:

  this.$axios.get("Route")
  this.$axios.post("Route",value)
  this.$axios.put("Route",value)
  this.$axios.delete("Route")
  

4.2 asyncData sending ajax

• Good for SEO (search engine optimization)
  • Data is directly displayed on the page, which is convenient for crawling
• Get data before page components are rendered
  • So no this
  • Store the queried data into the data area

4.2.1 one request

• asyncData syntax 1: use context object

  • Context object (all nuxt functions)

  <script>
  export default {
    async asyncData( context ) {
      let {data : baseResult} =  await context.$axios.get('Route')
  
      return {
        //Variable: baseResult.data
      }
    }
  }
  </script>
  

• asyncData syntax 2 using $axios object

  <script>
  export default {
      //Deconstruct $axios object in context
    async asyncData( {$axios} ) {
      let {data : baseResult} =  await axios.get('Route')
  
      return {
        //Variable: baseResult.data
      }
    }
  }
  </script>
  

4.2.2 multiple requests

• Use Promise object ($axios.get() to return Promise object)

<script>
export default {
  async asyncData( {$axios} ) {
    let [{data : baseResult1},{data : baseResult2}] = await Promise.all([Method 1,Method 2])

    return {
      //Variable 1: baseresult1.data,
      //Variable 2: baseresult1.data
    }
  },
}
</script>

4.2 fetch sends ajax

• Used to fill in the state number (store) data before the page is rendered

• Syntax:

  <script>
  export default {
    async fetch( {$aioxs , store } ){
      //Calling method
      let {data : baseResult} = await $axios.get('Route')
      //Save data to vuex
      sotre.commit('Method name',value)
    }
  }
  </script>
  

5. plug-in

5.1 review life cycle

• Only two methods, beforeCreate and created, will be called on the server side.
  • localStorage and sessionStorage are browser-side objects. They are not found in the front-end server,
  • If it is used in created, an error will be reported
• Conclusion:
  • In nuxt.js, put the code from the previous created() into mounted()

5.2 plug-in

5.2.1 plug in mechanism

• nuxt provides plug-ins to enhance or control existing programs

• Preparation steps:

  • Step 1: create files in plugins

  • Step 2: import in the file nuxt.config.js

    plugins: [
        //Both front and rear ends can be used
        { src: '~/plugins/my.js' },
        //For front-end clients only
        { src: '~/plugins/my1.js', mode: 'client' },
        //Use only on the front-end server side
        { src: '~/plugins/my2.js', mode: 'server' }
      ],
    

  • Step 3: test in the page

5.2.2 customize axios

• Purpose: to write an api.js file for unified management of maintenance requests

• Step 1: modify nuxt.config.js and write axios baseURL

   axios: {
      baseURL:'http://localhost: port number / routing prefix '
    }
  

• Step 2: create api.js in ~ / plugins folder, import data, and write method

  //Custom function
  const request = {
      //axios method
      findClassesAll : (params) => {
        return axios.get('/tearchservice/classes/findClassesAll',{params})
      },
    }
  
    var axios = null
    export default ({ $axios }, inject) => {
  
      //3) Save built-in axios
      axios = $axios
  
      //4) Hand over custom function to nuxt
      // Usage 1: in vue, this.$request.xxx()
      // Usage 2: in asyncData of nuxt, content.app.$request.xxx()
  
      inject('request', request)
    }
  
  

• Step 3: configure in the file nuxt.config.js

   plugins: [
       //Settings are available on both the client and server side
      { src: '~/plugins/api.js'},
    ],
  

• Step 4: call in other components

  <script>
  export default {
      //Using asyncData calls
      async asyncData( context ) {
          //Calling method: context.app.$request. Method name
          let {data : baseResult} = await context.app.$request.findClassesAll({})
          return {
              clist1: baseResult.data
          }
      },
      data() {
          return {
              params: {},
              clist: []
          }
      },
      methods: {
          async findClassesAllFn(){
              //Call method: this.$request. Method name
              let {data : baseResult} = await this.$request.findClassesAll(this.params)
              this.clist1 = baseResult.data
          }
      },
      mounted() {
          // this.findClassesAllFn()
      },
  }
  </script>