Nuxt-了解

<template>
  <div>
    页面布局头部
    <nuxt/>
    页面布局尾部
  </div>
</template>
<script>
  import Footer from '../components/Footer.vue'
  import Header from '../components/Header.vue'
  export default {
    components: {
      Header,
      Footer
    }
  }
</script>
<style>
</style>

<template>
  <div>
    用户管理导航内容--Nuxt的嵌套路由
    <br/>
    <nuxt-link :to="'/user/one'">one页面</nuxt-link>
    <nuxt-link :to="'/user/testrouter'">testrouter页面</nuxt-link>
    <br/>
    <nuxt-link :to="'/user/101'">修改用户</nuxt-link>
    <nuxt-child/>
  </div>
</template>
<script>
  // 使用自定义的布局-layout
  export default {
    layout:'test'
  }
</script>
<style>

</style>

<template>
  <div>
   这里是客户端渲染的内容： 修改用户信息{{id}},名称：{{name}}
    <br/>
    这里是服务端渲染的内容： 修改用户信息{{id}},名称：{{NodeJsname}}

  </div>
</template>
<script>
  // 使用自定义的布局-layout
  export default {
    layout:'test',
    //服务端渲染方法
   async asyncData(){
        console.log("请求服务端接口")
        //请求服务端接口...

      //同步调用
      //先调用A方法
        var a = await new Promise(function (resolve,reject) {
          setTimeout(function () {
            console.log(1)
            resolve(1)
          },2000)
        })
       var b = await new Promise(function (resolve,reject) {
         setTimeout(function () {
           console.log(2)
           resolve(2)
         },2000)
       })

      return{
        NodeJsname:'服务端渲染名'
      }
    },
    data(){
      return{
        id:'',
        name:''
      }
    },
    methods:{
      getUser:function () {
        //Ajax请求服务接口
        this.name = "客户端渲染名字"
      }
    },
    mounted(){
      this.id = this.$route.params.id;
      this.getUser()
    }
  }

</script>
<style>

</style>