Nuxt----使用

简单使用

　　在layouts中定义一个test.vue，内容如下

 

　　在user中定一个index.vue

• 如果没有写 layout:"test"，就会引入默认的 layout:"default"

 

　　启动程序，npm run dev，访问localhost:10000/user

路由

　　Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 

嵌套路由

　　在page目录下穿件一个user.vue（名字需要和里面的某一个目录名字一样，我们一user为例），当我们访问/user/index.vue的时候，就会访问 /user.vue，如果user.vue中添加了<nuxt-child/>，index.vue中的内容就会替换<nuxt-child/>。

• user.vue

 

•  效果图

获取url中的参数

• /xx/2 -->获取2使用 this.$route.params.id;
• /xx?id=2-->获取参数，使用 route.query.page

 

 

 　　访问：http://localhost:10000/user/1

 

请求数据（使用服务器渲染技术）

　　使用asyncData()方法，在该方法中来请求后台的数据；

　　此时渲染数据就是通过Nuxt.js类执行了，我们直接查看源代码可以显示name:小明的同学，而id：后面却不能有相应的值；

　　并且asyncData()中不能写一些前端的代码，比如alter()，就会报错

 

异步调用

　　观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。

<script>
  export default {
    layout: 'test',
    async asyncData() {
      console.log("服务器打印数据")
      return {
        name: '小明同学'
      }
    },
    data() {
      return {
        id: ''
      }
    }
    ,
    methods: {
      a() {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            //alert(1)
            resolve(1)
          }, 2000)
        })
      },
      b() {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            //alert(2)
            resolve(2)
          }, 1000)
        })
      }
    },
    mounted() {
      this.id = this.$route.params.id;
      this.a().then(res => {
        alert(res)
      })
      this.b().then(res => {
        alert(res)
      })
    }
  }
</script>

同步调用

　　我们还可以直接将一个异步方法放到另一个异步方法中，实现同步调用；

　　使用async/await完成同步调用 

<script>
  export default {
    layout: 'test',
    async asyncData() {
      console.log("服务器打印数据")
      //定义a方法,直接会调用
      var a = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          //返回a
          console.log("a")
          //必须有返回值,否在会堵塞在这
          resolve("a")
        },2000)
      });
      //定义b方法
      var b = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          console.log("b")
          resolve("b")
        }, 1000)
      });
      return {
        name: '小明同学'
      }
    },
    data() {
      return {
        id: ''
      }
    },
    mounted() {
      this.id = this.$route.params.id;
    }
  }
</script>

 

分页

 　　部分代码，只能进行页面刷新，重新生成html，因为为了SEO，不能使用ajax来进行数据的渲染，只能重新刷新页面，让nuxt.js 来请求后端，获取数据，将html和数据整合返回给浏览器

methods:{
      //分页触发
      handleCurrentChange(page) {
        //当前页码
        this.page = page
        //将当前页码设置到route中
        this.$route.query.page = page
        //将route中所有参数转成key/value串
        let querys = querystring.stringify(this.$route.query)
        window.location = '/course/search?'+querys;
      },