Nuxt.js基础

Nuxt.js使用vue.js(前端框架)+webpack(前端工程打包工具)+babel(js转码器,ES6代码转成ES5代码)三大技术框架组件

模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip.Nuxt.js使用1.3版本

 1.页面布局

layouts/haha.vue布局文件

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

访问页面效果:

页头

hehe页面

页尾

在pages目录创建hehe目录，并创建index.vue页面,指定页面组件使用 haha 布局：
<template>
  <div>
  hehe页面
  </div>
</template>
<script>
  export default{
    layout:'haha' //不指定布局的时候,默认layouts/default.vue布局
  }
</script>
<style>
</style>

2.路由

基础路由:
    (1)根据路径生成.例:pages/aaa/bbb.vue路由为/aaa/bbb
    (2)index.vue需要添加.例:pages/aaa/index.vue路由为/aaa
嵌套路由:
    pages/aaa/one.vue pages/aaa/two.vue 为子视图
    创建与pages/aaa文件夹相同级别同名文件 pages/aaa.vue
    aaa.vue文件内增加<nuxt -child/>用于显示子视图内容。

访问/aaa/one:

页头(布局)

aaa(aaa.vue父路由)

one(one.vue页面)

链接至子视图(至two.vue的链接)

页尾(布局)

    pages/aaa.vue内容如下:
    <template>
          <div>
　　　　　　　aaa
            <nuxt‐child/>//访问地址/aaa/one 当前位置为one内容
            <nuxt‐link :to="'/aaa/two'">链接至子视图</nuxt‐link>
          </div>
    </template>
    <script>
      export default{
        layout:"haha"
      }
    </script>
    <style>
    </style>

访问/aaa/77:

页头(布局)

aaa(aaa.vue父路由)

客户端渲染:77服务器端渲染:88

(本页面)

页尾(布局)

 

路径传参:pages/aaa/_id.vue 即访问路径/aaa/77   
    _id.vue:

<template>
    <div>
        客户端渲染:{{id1}}服务器端渲染:{{id2}}
    </div>
</template>
<script>
    export default{
        layout:"haha",
        asyncData(){
            //请求服务端接口
            return {
                id2:'88'
            }
        },
        data(){
            return {
                id1:''
            }
        },
        mounted(){
            this.id1 = this.$route.params.id;
        }
    }
</script>
<style>
</style>

3.asyncData数据都是由服务端渲染,会在组件（限于页面组件）每次加载之前被调用,所以在方法内是没有办法通过 this 来引用组件的实例对象

4.async /await方法

mounted或method方法为异步方法,若要变成同步方法需在第一次请求返回结果中写第二次请求
asyncData若想同步如下:
    async asyncData({ store, route }) {
      var a = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(1)
        },2000)
      });
      var a = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(2)
        },1000)
      });
    },