3.1.4 搜索页面
创建搜索页面如下：

页面文件参考：“资料”--》“search”--》index_1.vue，重要代码如下：
nuxt.js支持定义header，本页面我们在header中引入css样式并定义头部信息。

[mw_shl_code=applescript,true]//配置文件 let config = require('~/config/sysConfig') import querystring from 'querystring' import * as courseApi from '~/api/course' export default {   head() {     return {
title: '传智播客‐一样的教育,不一样的品质',    meta: [    {charset: 'utf‐8'},     {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},    {name: 'keywords', content: this.keywords} ],    link: [   {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},    {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},    {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}    ] }   },[/mw_shl_code]
其它数据模型及方法：[mw_shl_code=applescript,true]
//配置文件 let config = require('~/config/sysConfig') import querystring from 'querystring' import * as courseApi from '~/api/course' export default {   head() {     return {    title: '传智播客‐一样的教育,不一样的品质',    meta: [     {charset: 'utf‐8'},     {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},   {name: 'keywords', content: this.keywords} ],   link: [    {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},   {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},   {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}   ] }   },
<script>   //配置文件   let config = require('~/config/sysConfig')   import querystring from 'querystring'   import * as courseApi from '~/api/course'   export default {   head() {     return {      title: '传智播客‐一样的教育,不一样的品质',    meta: [         {charset: 'utf‐8'},   

    {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},      

     {name: 'keywords', content: this.keywords}     ],  link: [   {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},    {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},   {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}   ]   }  },  async asyncData({ store, route }) {   return {    courselist: {},first_category:{},[/mw_shl_code]
[mw_shl_code=applescript,true] second_category:{},  mt:'',   st:'',    grade:'',  keyword:'',   total:0,    imgUrl:config.imgUrl   }     },  data() {   return {    courselist: {},   first_category:{},   second_category:{},     mt:'',    st:'',      grade:'',   keyword:'',    imgUrl:config.imgUrl,    total:0,//总记录数  page:1,//页码      page_size:12//每页显示个数 }  },   watch:{//路由发生变化立即搜索sea
rch表示search方法
'$route':'search'  },     methods: {     //分页触发   handleCurrentChange(page) {  },    //搜索方法  search(){ //刷新当前页面           window.location.reload();   }
}   } </script>
[/mw_shl_code]

3.1.5 测试
重启Nginx，请求：http://www.xuecheng.com/course/search，页面效果如下：