nuxt從服務端請求數據demo

博主經過一夜的奮鬥終於解決了很多nuxt的問題，參數的傳遞，刷新頁面重新渲染，數據請求等

不多說直接上代碼

在pages添加 index.vue

<template>
  <section class="container">
    <div>
      <app-logo/>
      <div class="links">
        <button  @click='login' class="button button-caution">點我</button>
      </div>
    </div>
  </section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import axios from 'axios'

export default {
  components: {
    AppLogo
  },
  methods: {
    login () {
      axios({
        withCredentials: true,
        method: 'get',
        url: `url`,
      }).then((res) => {
        this.$router.push('/show')
      })
    }
  }
}
</script>

在pages添加show.vue

<template id="app">
  <section class="container">
    <sun :papa="account"></sun>
    <div>
      <div class="links">
       === {{ account }} ===
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import sun from './sun'

export default {
  data () {
    return {
      account: ''
    } 
  },
  methods: {
    async getData () {
      let { data } = await axios({
        withCredentials: true,
        method: 'get',
        url: `url`
      })
      this.account = data.account
    }
  },
  components: {
    sun
  },
  created () {
    this.getData ()
  }

}
</script>

<style>
</style>

在pages添加sun.vue

<template>
  <div>
    <div>
    +++ {{ papa }} +++ 
    </div>
    <div>
    ^^^ {{ pada }} ^^^
    </div>
  </div>
</template>

<script>
export default { 
  name: 'sun',
  props: ['papa'],
  data () {
    this.$watch('papa', function(newVal, oldVal){
      console.log(newVal)
      this.pada = newVal
    });
    return {
      pada: ''
    }
  }
}
</script>

<style>
</style>