美文网首页
Vue----Nuxt.js--学习

Vue----Nuxt.js--学习

作者: 二营长家的张大炮 | 来源:发表于2019-10-14 14:45 被阅读0次

官网:https://zh.nuxtjs.org/guide/installation

1.安装

npx create-nuxt-app <项目名>

2.Hello World


image.png

通过localhost:3000/hello/即可访问

修改项目ip、端口号配置


image.png

修改nuxt.config.js配置文件:https://zh.nuxtjs.org/guide/configuration

3.路由:

[https://zh.nuxtjs.org/guide/routing](https://zh.nuxtjs.org/guide/routing)

 <h1><nuxt-link :to="{name:'hello'}">HELLO</nuxt-link></h1>

路由传参

  <h1><nuxt-link :to="{name:'hello',params:{id:'110001'}}">HELLO</nuxt-link></h1>
 <h2>{{$route.params.id}}</h2>
// 路由传参---参数校验
   validate({params}){
       return /[0-9]+/.test(params.id)
   }
如果校验失败会跳转到404页面

使用axios异步请求数据

1.async await
  // 异步请求数据
   async asyncData ({ params }) {
    let { data } = await axios.get("https://api.myjson.com/bins/jhvlq")
    return { datas:data.data }
  }

2.promise对象
 asyncData ({params}) {
  return  axios.get("https://api.myjson.com/bins/jhvlq").then((res)=>{
       return {datas:res.data.data}
   })

3.回调函数
  asyncData ({ params }, callback) {
    axios.get("https://api.myjson.com/bins/jhvlq")
    .then((res) => {
      callback(null, { datas: res.data.data })
    })
  }

打包:

npm run generate

相关文章

  • Vue----Nuxt.js--学习

    官网:https://zh.nuxtjs.org/guide/installation 1.安装 2.Hello ...

  • 学习学习学习

    第三天了,连续三天,早上睁眼开始,看视频,做课件,连续作业,直到晚上十二点才睡觉。吃饭不规律,想起来就吃,感觉不饿...

  • 学习学习学习

    23岁的我,才真正明白,什么是学习,什么是努力,努力和不努力真的不同,就好比同样是一篇稿子,我用一周背下来,有的人...

  • 学习学习学习!

    妈妈总是让我学习,我只能用装当办法。 方法一: 方法二: 方法三: 方法四: ...

  • 学习学习学习

    001.今天看财富自由之路看了第二遍,而且看了一半,算是完成任务很开心。中间有想放弃的念头,坚持看完。眼睛痛,一直...

  • 学习学习学习

    马自达为什么坚持高压缩比自吸

  • 学习!学习!学习!

    学习的痛苦是暂时的 没有学到的痛苦是永恒的 因为学习而特别充实的一天 很踏实 ~~~~ 2015.11.28.阴天...

  • 学习!学习!学习!

    无数次想要去逃离,可这封闭的世界根本出不去。你没有什么可以抛弃、只能咬着牙带着面具微笑的活下去。 没有那个人、他也...

  • 学习学习学习!

    昨天和今天两个上午,都在学习新媒体运营,学习的过程中心里只有一个想法:这也太套路,太功利了吧。可真应了那句话...

  • 学习,学习,学习!

    近期学习重点有两个方面,一方面是把上一个阶段定下任务的几本书读完,并在读的过程中有输出和转化,让阅读和学习真正能有...

网友评论

      本文标题:Vue----Nuxt.js--学习

      本文链接:https://www.haomeiwen.com/subject/xpfcmctx.html