Nuxt.js

一、安装和目录结构

二、生命周期

(一) 服务端生命周期（重点）

1.nuxtServerInit

nuxtServerInit(store, context) {}

参数1： vuex 上下文

参数2：nuxt 上下文

2.middleware({store, route, redirect, params, query, req, res}) {}

功能：类似于vue中的导航守卫

(1) 全局

nuxt.config.js进行配置

router: { middleware: 'auth' }

新建 middleware 目录 ==> auth.js

(2) 局部

<script> export default { name: 'AaPage', middleware: 'auth' } </script>

新建 middleware 目录 ==> auth.js

3.validate({params, query}) {}

功能：校验 url 参数

  validate({params, query}) {
    console.log(query.id,'validate')
    return /^\d+$/.test(query.id)
  }

4.asyncData({store, params}) {}

功能：pages中页面来请求数据

5.fetch({app, store, params}) {}

(二) 服务端和客服端 共有的 生命周期

beforeCreate

created

(三) 客服端 生命周期

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

三、路由

1. 路由跳转

第一种：页面标签跳转

<nuxt-link to="/abc">bbbbb</nuxt-link>

第二种：js跳转

<template>
  <div>aaa
    <nuxt-link to="/abc">bbbbb</nuxt-link>
    <button @click="btn">js跳转</button>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  methods: {
    btn() {
      this.$router.push('/abc')
    }
  }
}
</script>

2. 路由跳转传参数

abc页面

  <div>aa</div>
</template>

<script>
export default {
  name: 'abc',
  created() {
    console.log(this.$route)
  }
}
</script>

第一种：页面标签跳转带参数

<nuxt-link :to="{name:'Abc', query:{id:1}, params:{id:2}}">bbbbb</nuxt-link>

第二种：js跳转带参数

<template>
  <div>
  aaa
    <button @click="btn">js跳转</button>
  </div>
</template>

<script>
export default {
  name: 'abc',
  methods: {
    btn() {
      // this.$router.push({
      //   path: '/Abc',
      //   query:{a:1}
      // })
      this.$router.push({
        name: 'Abc',
        params:{b:2}
      })
    }
  }
}
</script>