分享:nuxt中间件

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
一个中间件接收 context 作为第一个参数:

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

中间件执行流程顺序:
1.nuxt.config.js
2.匹配布局
3.匹配页面
中间件可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数:middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

然后在你的 nuxt.config.js 、 layouts 或者 pages 中使用中间件:
nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }
}

现在,stats 中间件将在每个路由改变时被调用。
您也可以将 middleware 添加到指定的布局或者页面:
pages/index.vue 或者 layouts/default.vue

export default {
  middleware: 'stats'
}

如果你想看到一个使用中间件的真实例子,请参阅在 GitHub 上的example-auth0。
链接:https://github.com/nuxt/example-auth0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值