Nuxt 采坑

在.vue文件外使用Vue或者this对象报错问题

当我们配置axios时，会在util创建一个全局文件request.js，在这里如果想进行Store，router跳转之类的操作，需要我们用到Vue对象，在.vue的文件里我们可以直接使用this，但是在这里的this并不指向Vue对象，而是undefined，如下：

console.log('外部this', this) // undefined
// request interceptor
request.interceptors.request.use((config) => {
  console.log('拦截器里的this', this) // undefined
  return config
}, errorHandler)

如果说是用import vue 的方式来调用的话，虽然能拿到vue的构造函数，但是我们并没有给Vue构造函数中添加$sotre和$router，所以：

import Vue from 'vue'
console.log('vue 对象', Vue) // 【function】Vue构造函数
console.log('store 对象', Vue.$store) // undefined
console.log('router 对象', Vue.$router) // undefined

---

以上是错误示例，正确的选择是是用$nuxt全局变量，但是要注意$nuxt只能在拦截器里使用，外部打印会报错not define，如下：

console.log('外部使用$nuxt',$nuxt) // 报错not defined
// 拦截器里使用没有问题
request.interceptors.request.use((config) => {
  console.log('$nuxt 全局对象', $nuxt) 
  console.log('$store', $nuxt.$store)  
  console.log('$router', $nuxt.$router)
  return config
}, errorHandler)

调用接口会打印如下内容：

axios请求跨域配置

安装依赖时，要注意这里的依赖是@nuxt.js下的，而不是原本的axios

npm install @nuxtjs/axios @nuxtjs/proxy --save

在 nuxt.config.js中添加如下配置

module.exports = {
  modules: [ '@nuxtjs/axios' ], // 不需要加入@nuxtjs/proxy
  axios: {
    proxy: true,
    prefix: '/api', // baseURL
    credentials: true,
  },
  proxy: {
    '/api/': {
      target: 'http://127.0.0.1:3001', // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // api重写
      },
    },
  }
}

怎么设置项目title和meta

nuxt脚手架创建出来的项目是没有index.html文件的，所以我们想添加默认title、meta和网页语言等，都需要在nuxt.config.js中：

export default {
  head: {
    title: '网站标题',
    htmlAttrs: {
      lang: 'zh' // 网站语言为中文
    },
    meta: [
      { charset: 'utf-8' }, // 字符集
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }, // meta中的viewport
      {
        hid: 'keywords',
        name: 'keywords',
        content: '关键字，多个关键字，用逗号隔开'
      },
      {
        hid: 'description',
        name: 'description',
        content: '网站描述，用于百度等网站的展示'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } // favicon
    ],
  }
}

使用hash值跳转都页面指定位置

在nuxt.config.js中，有一个配置项为router，其中有个函数为scrollBehavior，其中可以设置页面切换时的跳转动作，如下我们想做一个通过hash值获取到对应id的DOM，进行跳转，就可以这么配置

export default{
router: {
    scrollBehavior(to) {
      if (to.hash) {
        console.log('scroll to', to.hash)
        // 这里使用延迟来保证代码能在dom出现后再获取，防止报错，其实相当于return一个{selector: '#hash'}
        return new Promise((resolve => {
          setTimeout(() => {
            resolve({selector: to.hash}) // 因为hash值就是带#号的，所以selector会自动找id为hash值的DOM，并跳转到对应位置
          }, 100)
        }))
        // return
      } else {
        return {x: 0, y: 0, behavior: 'auto'} // 如果没有hash值，就跳转到顶部，这里看个人要求，也可以不用
      }
    }
  }
}

配置完router的跳转，NuxtLink中定义跳转的hash值（注意：nuxt中的router-link要改为nuxt-link），指定元素的位置加上id，如下

<NuxtLink to="/#hash-test"> hash跳转link</NuxtLink>
<div id="hash-test" style="margin-top: 400px;">跳转到这里</div>