nuxt配置head,静态&动态

重生之做前端

已于 2024-03-14 14:34:08 修改

阅读量693

点赞数 14

文章标签：前端 javascript html

于 2024-03-14 14:29:56 首次发布

本文链接：https://blog.csdn.net/qq_36821038/article/details/136709672

版权

本文介绍了如何在NUXT应用中使用静态和动态方式配置head信息，包括标题和meta标签，以及如何在不同页面间动态获取和传递数据，如新闻列表和详情页的交互.

摘要由CSDN通过智能技术生成

NUXT head 配置

关于head信息内容，可以写死，也可以动态获取，写法如下

<script>
export default {
  head(){
    return {
      title: '关于我们',
      meta: [
        { hid: 'description', name: 'description', content: '此处是网站描述' },
      ]
    }
  },
}
</script>

动态获取head

pages =》news.vue

pages =》news =》 index.vue

pages =》news =》 _id.vue （这样可以动态head命名，ES6写法）

=======================

pages =》news.vue

<nuxt-child/>//可获取子页面信息
//获取index.vue页面

写法

pages =》news =》 index.vue

<template>
  <div>
    <h2>新闻列表</h2>
    <ul>
      <li v-for="item in newList" :key="item.id" @click="goDeatil(item.id)">
        {{ item.title }}
      </li>
    </ul>
  </div>
  </template>
  
  <script>
  export default{
    middleware:'auth',
    data(){
      return {
        newList:[
          {id:1,title:'LinkedIn领英怎么开发客户？'},
          {id:2,title:'Linked么开发客户？'},
          {id:3,title:'Linn领英怎么开发客户？'},
          {id:4,title:'Linke么开发客户？'},
          {id:5,title:'Linke开发客户？'},
        ]
      }
    },
    methods:{
      goDeatil(id){
        console.log("🚀 ~ goDeatil ~ id:", id)
          this.$router.push({
            path:`/news/${id}`//ES6写法传参
          })
      }
    }
  }
  </script>

pages =》news =》 _id.vue

<template>
  <div>
    <h2>新闻详情页</h2><br/>
    {{ id }}<br/>
    <br/>
  </div>
</template>

<script>
export default{
  head(){
    return {
      title: this.id,
      meta: [
        { hid: 'description', name: 'description', content: '此处是网站描述' },
      ]
    }
  },
  data(){
    return{
      id:0
    }
  },
  created(){
    console.log("🚀 ~ created ~ created:", this.$route.params)
    this.id = this.$route.params.id
  }
}

</script>