nuxt简单入门2

---

前言

提示：接上篇

---

一、nuxt 嵌套路由

• 使用nuxt嵌套路由，显示上左右效果
  

• nuxt嵌套路由，使用注意项：

• 注意1：提供vue文件（父组件），再提供同名文件夹，文件夹用于存放子组件

• 注意2：在父组件设置 <nuxt-child> 确定子组件显示位置

• 分析：

• 1）修改默认布局，添加导航（班级管理、学生管理）

• 2）编写父组件（classes.vue），添加2个div，用于显示左右数据（添加css样式）

• 3）修改父组件，添加2个切换路由标签<nuxt-link>

• 4）修改父组件，在指定区域显示子路由

1.1体验

• 1）修改默认布局，添加导航（班级管理、学生管理）
• 

<nuxt-link to="/classes">班级管理</nuxt-link>
<nuxt-link to="/student">学生管理</nuxt-link>

• 2）编写父组件（classes.vue），添加2个div，用于显示左右数据（添加css样式）
• 

<template>
  <div>
     <div class="left">
       <nuxt-link to="/classes/add">添加班级</nuxt-link> <br/>
       <nuxt-link to="/classes/list">班级列表</nuxt-link> <br/>
     </div>
     <div class="right">
       <!-- 显示视图 -->
       <nuxt/>
     </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  .left {
    width: 200px;
    height: 500px;
    border: 1px solid #000;
    float: left;
  }

  .right {
    margin-left: 10px;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    float: left;
  }
</style>

• 3）在指定区域显示子路由
  

1.2 结论

• 步骤1：编写父组件，及其同名文件夹
• 步骤2：父组件添加 <nuxt /> 用于确定子组件显示位置

2.路由动画效果

• 路由动画效果：路由切换时执行的动画。
• 分类：离开动画、进入动画

2.1

• 全局路由动画
  • 1）编写css，css样式名称为固定值
  • 2）将css配置nuxt
• 自定义路由动画
  • 1）编写css，css样式的部分名称固定值
  • 2）将css配置nuxt（同上）
  • 3）修改vue页面，启动自定义动画

2.2体验

• 全局路由动画
• 1）编写css，css样式名称为固定值
• 

/* 全局动画效果样式，名称为固定值，内容为：切换透明度 */
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}

• 2）将css配置nuxt

---


  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'assets/main.css'
  ],

• 自定义路由动画
  1）编写css，css样式的部分名称固定值
  

.test-enter-active, .test-leave-active {
  transition: all 2s;
  font-size:12px;
}
.test-enter, .test-leave-active {
  opacity: 0;
  font-size:40px;
}

• 2）将css配置nuxt（同上）

• 3）修改vue页面，启动自定义动画

3.nuxt特殊配置：head

• nuxt在vue基础进行增强，支持vue所有功能。

  <template>
  <div class="classes-add">添加班级</div>
</template>

<script>
export default {
  head: {
    title: '添加班级',
    link: [
      { rel: 'stylesheet' , type: 'text/css' , href: '/style/add.css'}
    ],
    script: [
      { type: 'text/javascript' , charset: 'UTF-8' , src: '/js/add.js'}
    ]
  }
}
</script>

<style>

</style>

4.1.整合axios

• 整合后普通ajax操作

<template>
  <div>{{msg}} </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  async mounted() {
    // 页面加载成功后，发送ajax
    let { data } = await this.$axios.get('/service-consumer/feign/echo/abc')
    this.msg = data
  },
}
</script>

<style>

</style>

4.2asyncData 发送ajax

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  async asyncData( context ) {
    // 发送ajax
    let { data } = await context.$axios.get('/service-consumer/feign/echo/abc')

    // 返回数据
    return {
      msg : data
    }

  },
}
</script>

<style>

</style>

二 简单案例

学生列表：

• 需求1：查询班级列表 【要求：必须使用SSR技术处理班级信息】
• 需求2：查询学生列表，含条件（班级） 【要求：必须使用普通ajax查询数据】
  

<template>
  <div>

    <table border="1">

      <tr>
        <td>
          <!-- {{classesList}} -->
            <select v-model="vo.cid" >
              <option v-for="(classes,index) in classesList.data" :key="index" :value="classes.cid">{{classes.cname}}</option>
            </select>
        </td>
        <td>
            <input type="button" value="查询" @click="findAll()" />
        </td>
      </tr>
      <tr>
        <td>编号</td>
        <td>学生姓名</td>
        <td>年龄</td>
        <td>班级</td>
      </tr>
      <tr v-for="(student , index) in msg" :key="index">
        <td>{{student.sid}}</td>
        <td>{{student.sname}}</td>
        <td>{{student.age}}</td>
        <td>{{student.classes.cname}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {

async asyncData( context) {
    let{data} = await context.$axios.get('classes-service/classes')
    return {
      classesList : data
    }
  },


data() {
    return {
      msg:{},
      vo:{}
    }
  },
  methods: {
    async findAll() {
    let{data} = await this.$axios.post('/student-service/student/condition',this.vo)
    this.msg = data.data.records
  },
  },

   mounted() {
    this.findAll()
  },
}
</script>

<style>

</style>

总结

提示：
下章 - nuxt简单入门3
希望各位老师同学提出意见。