Nuxt.js的使用

1.asyncData

  asyncData({ redirect }) {
  	console.log(this, 6767) // this为undefined
    redirect('/download')
  },

在组件渲染之前出发,比如我要进入这个页面是路由http://localhost:3333/进入index页面,由于在asyncData里面写上重定向到/download,所以还没有看到组件就,立马重定向到http://localhost:3333/download页面了,要注意asyncData是服务端的周期,所以在浏览器看不到console.log的使用,要在终端才能看到哦~由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象,这里打印出来undefined

2.head的使用

head 有什么用? 能够添加描述,seo优化,根据keyword能够搜索链接,在一些软件,类似于qq,钉钉能够看到相关的填写上去的信息

 head: {
    title: '你真棒！',
    meta: [
      {
        name: 'keywords',
        content: '你,棒棒',
      },
      {
        name: 'description',
        content: '一个夸你的东西!',
      },
    ],
  },

3.如何在Nuxt.js项目中去添加公共的方法?

3.1首先在nuxt.config.js中去添加common.js路径,每次配置config一定记得运行一次!!!还有调用的时候不能在created里面,还没有初始化完成~

 plugins: [
    { // 二维码插件
      src: '@/plugins/qrcode.js',
      ssr: false,
    },
    { // 提示功能相关的组件注册
      src: '@/plugins/common.js',
      ssr: false,
    },
  ],

3.2要以注入的方式注入到vue里面 common.js

import Vue from 'vue'
const globalFun = {
  install(Vue) {
    Vue.prototype.globalFun = {
      // 事件
      add:function(val){
        return val 
      },
      initCount: 10,
    }
  },
}
Vue.use(globalFun)

3.3调用, 在mounted里面调哦,不要在created里面(在plugin里面有句话: Plugins to load before mounting the App,意思就是plugins在那个mounted阶段之前注入,说明了mounted周期函数就一定能拿到注入的方法或者值了~,至于在哪个mounted之前那个阶段注入的也没细说,估计要看源码)

 mounted() {
    console.log(this.globalFun, 888) // {initCount: 10, add: ƒ}
    console.log(this.globalFun.add(11)) // 11
    console.log(this.globalFun.initCount) // 10
  },