Nuxt.js开启SSR渲染的教程详解(7)

日期：2020-05-11 栏目：程序人生浏览：次

1.我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。

/pages/news/index.vue

<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'nuxt.com'}}">News-1</nuxt-link></li>

2.第一步完成后，我们修改/pages/news/_id.vue，让它根据传递值变成独特的meta和title标签。

<template>
 <div>
  <h2>News-Content [{{$route.params.id}}]</h2>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
<script>
export default {
 validate ({ params }) {
 // Must be a number
 return /^\d+$/.test(params.id)
 },
 data(){
 return{
  title:this.$route.params.title,
 }
 },
//独立设置head信息
 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }
}
</script>

注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。

第十节：asyncData方法获取数据

Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData，异步请求数据。

（1）创建远程数据

在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。我们打开网站，在对话空中输入JSON代码，这个代码可以随意输入，key和value均采用字符串格式创建。

{
 "name": "Nuxt",
 "age": 18,
 "interest": "I love coding!"
}

输入后保存，网站会给你一个地址，这就是你这个JSON仓库的地址了。https://api.myjson.com/bins/1ctwlm

（2）安装Axios

Vue.js官方推荐使用的远程数据获取方式就Axios，所以我们安装官方推荐，来使用Axios。这里我们使用npm 来安装 axios。直接在终端中输入下面的命令：

npm install axios --save

1.ansycData的promise方法

我们在pages下面新建一个文件，叫做ansyData.vue。然后写入下面的代码：

<template>
 <div>
  <h1>姓名：{{info.name}}</h1>
  <h2>年龄：{{info.age}}</h2>
  <h2>兴趣：{{info.interest}}</h2>
 </div>
</template>
<script>
import axios from 'axios'
export default {
 data(){
  return {
   name:'hello World',
  }
 },
 asyncData(){
  return axios.get('https://api.myjson.com/bins/1ctwlm')
  .then((res)=>{
   console.log(res)
   return {info:res.data}
  })
 }
}
</script>

转载注明出处：http://www.heiqu.com/286.html

Nuxt.js开启SSR渲染的教程详解(7)

相关推荐