9.Nuxt.js的使用

要控制页面跳转将页面放在pages目录下
页面跳转可以通过目录访问
页面跳转方式
基本路由： /lend -->pages/lend/index.vue
动态路由：/lend/1–>pages/lend/_id.vue页面，并通过 this.$route.params.id 获取动态路径
嵌套路由（路由出口）： NuxtChild 来指明嵌套路由的出口（模板的位置，默认为同名包下的index.vue）

①页面

默认页面都放在pages目录下
index.vue为首页即可以直接访问http://localhost:3000访问
其他的页面都可以直接在url访问（自动添加路由）

②页面实例

文档结构
访问地址为http://localhost:3000
http://localhost:3000/lend（默认访问首页pages/lend/index.vue）
http://localhost:3000/lend/1（访问_id.vue，前面的_id为参数，可以根据url封装）
首页展示
pages/index.vue

<template><div><NuxtLink to="/about">关于我们</NuxtLink><NuxtLink to="/lend">我要投资</NuxtLink><NuxtLink to="/user">用户中心</NuxtLink><a href="http://atguigu.com" target="_blank">尚硅谷</a><h1>Home page</h1></div>
</template>

lend页面展示

pages/lend/_id.vue

<template><div>这个投资产品是：{{ id }}</div>
</template><script>
export default {data() {return {id: null,}},created() {this.id = this.$route.params.id},
}
</script>

pages/lend/index.vue

<template><div><h1>投资产品列表</h1><NuxtLink to="/lend/1">产品1</NuxtLink><NuxtLink to="/lend/2">产品2</NuxtLink></div>
</template>

③嵌套路由

访问pages/user是访问pages/user/index.vue还是pages/user.vue
嵌套路由：即访问的是pages/user.vue，其中可以设置默认路由出口模板即为pages/user/index.vue中的内容，可以设置其他模板渲染该路由出口
嵌套路由

pages/user.vue

<template><div><h1>用户中心</h1><!--/user/index.vue--><NuxtLink to="/user">个人中心</NuxtLink><!--/user/user.vue--><NuxtLink to="/user/user">我的投资</NuxtLink><!--嵌套路由出口，根据上述模板更改，默认为出现/user/index.vue--><NuxtChild /></div>
</template><script>
export default {layout: 'my',
}
</script>

pages/user/index.vue

<template><div><h2>我的账户</h2></div>
</template>

pages/user/user.vue

<template><div><h2>我的投资</h2></div>
</template>

6.Nuxt.js的页面布局和整体配置

①页面布局

默认使用layouts/default.vue

<template><div><!--页面布局公共尾部--><div>这是网站公共的头部</div><!--页面占位符--><Nuxt /><!--页面布局公共尾部--><div>这是网站公共的底部</div></div>
</template>

展示
自定义布局
layouts/my.vue

<template><div><!--页面布局公共尾部--><div>自定义的头部</div><!--页面占位符--><Nuxt /><!--页面布局公共尾部--><div>自定义的底部</div></div>
</template>

引入自定义布局

<script>
export default {layout: 'my',
}
</script>

②页面整体配置

nuxt.config.js

module.exports = {head: {title: '尚融宝',meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{hid: 'meta-key-words',name: 'keywords',content:'尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款，短期借款问题， 资金银行存管，安全保障。',},{hid: 'description',name: 'description',content:'尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款、短期借款问题。 资金银行存管，安全保障。',},],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],},css: [// CSS file in the project'~/assets/css/main.css',],server: {port: 3001, // default: 3000},
}

/assets/css/main.css

body {background-color: pink;
}

7.Nuxt.js整合axios

使用

前端服务器使用asyncData块和同步方法完成ajax请求
并且由于asyncData块类似静态方法最先执行，最先渲染后返回给前端页面
注意
created执行的流程是在前端浏览器完成
asyncData的执行流程是在前端服务器完成，然后返回给前端浏览器端。可以理解为静态方法，先渲染再返回。

①整合axios

nuxt.config.js中添加配置

modules: ['@nuxtjs/axios', //引入axios模块],//引入基本地址，后面访问直接/axios: {// Axios options herebaseURL: 'http://icanhazip.com',},//引入axios拦截器plugins: ['~/plugins/axios'],

/plugins/axios

export default function({ $axios, redirect }) {$axios.onRequest((config) => {console.log('执行请求拦截器 ' + config.url)})$axios.onResponse((response) => {console.log('执行响应拦截器')return response})$axios.onError((error) => {console.log(error) // for debug})
}

②对首页面修改为前端服务器渲染后返回到浏览器

pages\index.vue

<template><div><NuxtLink to="/about">关于我们</NuxtLink><NuxtLink to="/lend">我要投资</NuxtLink><NuxtLink to="/user">用户中心</NuxtLink><a href="http://atguigu.com" target="_blank">尚硅谷</a><h1>主页面e</h1><p>您的ip是{{ ip1 }}</p></div>
</template><script>
export default {data() {return {ip: null,}},//客户端渲染created() {//get// this.$axios.get('http://icanhazip.com').then((response) => {//   console.log(response)//   this.ip = response.data// })//$get直接将response.data返回为response// this.$axios.$get('http://icanhazip.com').then((response) => {//   console.log(response)//   this.ip = response//})},//前端服务器渲染//实现服务器端的数据渲染（渲染数据到html返回浏览器段），静态方法，在前端的服务器优先执行//结构的形式//异步操作//使用async和await来同步async asyncData({ $axios }) {console.log('asyncData')//异步操作//加上await变为同步操作let response = await $axios.$get('/')return {ip1: response, //这种写法的问题是：前面的远程调用是异步的，无法在这获取到response}},
}
</script>