登录
nuxt 配 modules模块 以及 数据交互
2026年1月22日 18:26
类型 Array modules是Nuxt.js扩展，可以扩展它的核心功能并添加无限。 例如(nuxt.config.js)： 安装过程中，它会让我们选择模块。 Axios - Promise bas
讲一下nuxt中的配置，那么首先的配置文件是nuxt.config.js，那么也就是说在我们的项目的根目录的一个nuxt.config.js文件。然后大家需要明确的一点就是这个文件的所有的配置，是全局配置。
拿head来说，那我们知道nuxt它是可以解决seo的部分问题的。比如说它可以解决每个网页都有他自己所独有的title描述以及关键字。那如果说我这里有很多页面，到那时呢我都没有进行配置，那这个时候就会走全局的配置。
当然，如果某个页面配置了，就会走独有的页面的head。
在pages里边新建一个页面。比如list.vue：
<template>
<div>列表页</div>
</template>
然后一个about页面
<template>
<div>关于页</div>
</template>
所有页面的title全是页面的项目名。因为这些页面都没有独有的head配置。所以如果想要做针对单独页面的配置。那应该怎么去配置呢？
可以注意一下写法，参考文档这个api有一个head的单篇介绍。只不过文档写得不是特别的完整。
在全局是head的一个对象，然后在单独页面就是一个head的一个函数。
动态title
做动态title标题。包括描述或者关键词可能都是动态的。
然后呢现在我们做的是点击每一个进入到这个文章的详情页。
/pages/news/index.vue
<template>
<div>
<h1>新闻列表</h1>
<ul>
<li
v-for='item in newList'
:key='item.id'
@click='goDetail(item.id)'
>
{{item.title}}
</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
newList: [
{ id: 1, title: '111' },
{ id: 2, title: '222' },
{ id: 3, title: '333' },
{ id: 4, title: '444' },
{ id: 5, title: '555' },
]
}
},
methods: {
goDetail(id) {
this.$router.push({
path: `/news/${id}`
})
}
}
}
</script>
// _id.vue
<template>
<div>
{{ id }} 新闻的详情页
</div>
</template>
<script type="text/javascript">
export default{
head() {
return {
title: this.id,
meta: [
{ hid: 'description', name: 'description', content: '此处是网站描述' },
{ hid: '', name: 'keywords', content: '此处是网站关键词' }
]
}
},
data () {
return {
id: 0
}
},
created() {
this.id = this.$route.params.id
}
}
</script>
总结
head 可以全局配置，也可以局部配置，也可以动态配置。
