Nuxt-了解

布局

　　布局文件为layouts

　　　　在layouts里创建一个test.vue的布局测试

<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>

路由

　　自动根据目录结构生成路由

--user　　　　　　对应　　　　/user

----one　　------------------------->  /user/one

----test　　　　　　　　　　　 /user/test　

　　嵌套路由-----可用于导航页

　　　　嵌套路由应与对应的路由目录路径为一级，上面的布局引用页就为嵌套路由使用的页面。

• 父页面 parent 的 path 是有 / 斜杠的
• 而 子页面 child 的 path 是没有 / 斜杠的

 asyncData方法和同步调用

　　主要用于让页面进行服务端渲染

　　示例：

<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>