视图
- 默认模板：
项目/app.html，就可以作为模板，需要特殊标记进行内容替换，可参考官方提供的代码。 - 默认布局：
- 位置：
项目/layouts/default.vue - 内容：
- 位置：
//切换路由
<nuxt-link to="">
//显示视图
<nuxt/>
自定义布局：
- 位置：
项目/layouts/自定义名称.vue - 内容：同默认
- 使用：其他组件（vue页面）
export default { layout: '自定义名称' }
错误页面：
- 位置：
项目/layouts/error.vue - 内容：
<template>
<div>
{{error}}
</div>
</template>
<script>
export default {
props: ['error']
}
</script>
内部使用
<error error="异常"></error>
nuxt特殊配置
export default {
layout: '自定义布局',
transition: '过渡效果',
head: { //给html页面的<head>内部提交内容
title: '',
script: [
{type:'text/javascript', src:'路径'}
],
link: [
{type:'text/css',rel:'stylesheet', href:'路径'}
]
}
}
整合axios
- nuxt 在安装时，如果选择了axios，自动认进行整合。
- 配置访问前缀（基路径）
- 位置：nuxt.config.js 进行修改
- 内容：
axios: {
baseURL: '前缀路径，网关路径'
}
使用，在任意vue组件
methods: {
async selectAll() {
// 发送ajax，并获得响应对象
let response = await this.$axios.get(...)
response.data
// 发送ajax，从响应对象中解构出data属性
let {data} = await this.$axios.get(...)
// 发送ajax，从响应对象中解构出data属性，并起别名 baseResult
let {data:baseResult} = await this.$axios.get(...)
}
}
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
