axios 添加公共参数，比如从url上取参数
在plugins文件夹下面建个api.js,然后在nuxt-config.js配置
plugins: [{
src: '@/plugins/api',
}],
import axios from './axios'
import apiConfig from './api-config'
import utils from './utils'
import Vue from 'vue'
export default ({store, app}) => {
let methods = ['get','post','put','patch','delete'];
Vue.prototype.server=app.context.server={}
for (let method of methods) {
app.context.server[method]=Vue.prototype.server[method] = function (key, data={}, option={}) {
let argArr=[]
let commonData={
lang:store.state.lang
}
data=utils.extend(commonData,data)
if(!key){
throw new Error('\'key\' argument in server function don\'t have a value')
}else if(!apiConfig[key]){
throw new Error(key + ' not defined in \'api-config\' file')
}
if(method === 'get'){
option.params = data
argArr.push(apiConfig[key], option)
}else if(method === 'post' || method === 'put' || method === 'patch'){
argArr.push(apiConfig[key], data, option)
}
return axios[method].apply(null, argArr)
// return axios[method](apiConfig[key], data, option)
.then((response) => {
let resData = response.data
if (resData.code === 1) {
let msg = '系统异常'
// Vue.prototype.$confirm(msg, '错误', {
// confirmButtonText: 'OK',
// showCancelButton: false,
// type: 'error'
// })
}
return resData
})
.catch((err) => {
// Vue.prototype.$confirm(err.config.url + ' ' + err.response.statusText, '错误', {
// confirmButtonText: 'OK',
// showCancelButton: false,
// type: 'error'
// })
console.error(err)
return err
})
}
}
// console.log(app.context.server,6547)
}
完成后就可以在页面中引用
```javascript
asyncData (context) {
return context.server.post('getStyleDetail',{"designId": 101971
}).then((res) => {
return { title: res.message }
})
},
mounted(){
this.server.post('getStyleDetail',{
"designId": 101971
}).then((res) => {
this.title=res.message
})
#### # [how to write global router-function in nuxt.js](https://stackoverflow.com/questions/45509472/how-to-write-global-router-function-in-nuxt-js)
You can create a plugin for Nuxt
create a `plugin/route.js` file:
export default ({ app }) => {
// Every time the route changes (fired on initialization too)
app.router.afterEach((to, from) => {
//do something to validate
}
}
and update your `nuxt.config.js` file:
plugins: ['~/plugins/route']
More details about Nuxt plugins: [https://nuxtjs.org/guide/plugins](https://nuxtjs.org/guide/plugins)
#### Cannot read property '_t' of undefined
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default ({ app, store }) => {
// Set i18n instance on app
// This way we can use it in middleware and pages asyncData/fetch
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'en',
messages: {
'en': require('~/locales/en.json'),
'fr': require('~/locales/fr.json')
}
})
app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}
参考：https://zh.nuxtjs.org/examples/i18n#codefund_ad
http://kazupon.github.io/vue-i18n/guide/lazy-loading.html
多语言vue-i18n
nuxtjs [vue-i18n] Value of key 'message.hello' is not a string!
import {i18n,loadLanguageAsync} from '~/setup/i18n-setup'
export default function ({app}) {
app.router.beforeEach((to, from, next) => {
const urlLang = to.params.lang
let lang
if(urlLang === '1'){
lang='en'
}else if(urlLang === '0'){
lang='sa'
}
loadLanguageAsync(lang).then(() => next())
})
}
to.params.lang为undefined，改成to.query.lang,
url 为http://localhost:3000/test?lang=1，需要从to.query中取。
页面添加公共样式：
在 nuxt.config.js 中添加 CSS 资源：
Nuxt.js 让你可以配置全局 CSS 文件、模块、库（每个页面都会被引入）。
module.exports = {
css: [
// 加载一个 node.js 模块
'hover.css/css/hover-min.css',
// 同样加载一个 node.js 模块，不过我们定义所需的预处理器
{ src: 'bulma', lang: 'sass' },
// 项目中的 CSS 文件
'~assets/css/main.css',
// 项目中的 Sass 文件
{ src: '~assets/css/main.scss', lang: 'scss' } // 指定 scss 而非 sass
]
}
