Nuxt的middleware中间件使用方法

首先申明，我们使用的vue3且有一个vue-cli的后台，前台为了SEO和加载效率，所以选择了NUXT框架

其次，由于我们想做多皮肤功能，所以在用户访问网页之前，先确定管理员设置的前台网页使用的哪一个皮肤，这里用到了中间件概念。 使用函数定义一个页面的中间件，会在页面初始化之前调用

middleware目录中，新建一个whichSkin.TS文件，调用中间件的方法有两种；

一种的是在nuxt.config.js中的router添加middleware参数

 router:{
    middleware: 'whichSkin',
    extendRoutes(routes, resolve) {
      console.log(routes)
      // routes.push({
      //   path: '/users/:id'
      // })
    }
  },

另一种是直接在页面上添加

//例如urer.vue
export default {
  middleware: 'whichSkin',
}

whichSkin.ts文件内容添加（我直接添加的官网代码）

export default function ({route, store, redirect }) {
  console.log(route)
  // If the user is not authenticated
  // if (!store.state.authenticated) {
  //   return redirect('/login')
  // }
}

迷惑行为来了，除了官网给的route, store, redirect， 中间件的参数有哪些？打出来看看吧

export default function (app) {
  console.log(app) 
}

chorme控制台显示打印的内容为：

$axios: ƒ wrap()
$config: {}
app: {head: {…}, store: Store, router: VueRouter, nuxt: {…}, render: ƒ, …}
base: "/"
env: {}
error: ƒ ()
from: {name: "default-siteid", meta: Array(2), path: "/default/4wzv92/", hash: "", query: {…}, …}
isDev: true
isHMR: false
isStatic: false
next: ƒ ()
nuxtState: {serverRendered: true, routePath: ""/default/4wzv92/""}
params: {catname: undefined, id: undefined, __ob__: Observer}
payload: undefined
query: {}
redirect: ƒ (status, path, query)
route: {name: "default-siteid", meta: Array(2), path: "/default/4wzv92/", hash: "", query: {…}, …}
store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
_errored: false
_redirected: false

既然知道了有这些参数，那就好办了，想鉴权，想重定向，想axios请求...没人拦你了，去吧，皮卡丘！！！

注意： 新标签使用middleware中间件在server端请求数据，此时提交到vuex store，发现并不能更新store，而且数据不一致。使用nuxtServerInit来初始化即可。

ok, 就写到这里，继续搬砖了！