Nuxt.js 视图+axios整合

最新推荐文章于 2024-02-02 17:46:44 发布

原创最新推荐文章于 2024-02-02 17:46:44 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文详细介绍了Nuxt.js的默认和自定义布局设置，包括如何创建和使用错误页面。同时，讲解了Nuxt的特殊配置选项，如设置页面头部信息和过渡效果。此外，还涵盖了axios的整合，包括配置基路径和不同方式的API调用。通过实例展示了如何在Nuxt项目中实现这些功能。

视图

默认模板：项目/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(...)
                                             
    }
}