nuxt3.0学习-四、nuxt3.0的middleware（中间键）、composables（可组合物）以及Plugins（插件目录）

Nuxt3.0中间键了解地址

Nuxt提供了一个可定制的路由中间件框架，您可以在整个应用程序中使用它，非常适合在导航到特定路由之前提取要运行的代码；
路由中间件有三种：

• 匿名（或内联）路由中间件，直接在使用它们的页面中定义。
• 命名路由中间件，放置在中间件/目录中，在页面上使用时将通过异步导入自动加载。（注意：路由中间件的名称被标准化为kebab情况，所以someMiddleware变成了someMiddleware.）
• 全局路由中间件，放置在中间件/目录中（带有.Global后缀），并将在每次路由更改时自动运行。

匿名（或内联）路由中间件

<script lang="ts" setup>
export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
</script>

命名路由中间件

//中间件引入
definePageMeta({
  middleware: ["auth"]
})

全局路由中间件

全局路由名称增加 global后

import { updataUserInfo } from "@/composables/useUtils";
import {baseOrigin, baiduIncludeApi} from '@/utils/public.js'

export default defineNuxtRouteMiddleware((to, from) => {
  updataUserInfo();

  // 百度收录
  // if(baseOrigin.includes('')){
  //   let res = baiduIncludeApi(`${baseOrigin}${to.href}`)
  // }
});

composables（可组合物）

Nuxt 3 使用该目录通过自动导入自动将您的 Vue 可组合物导入您的应用程序！composables/
在后台，Nuxt自动生成文件以声明类型。.nuxt/imports.d.ts
请注意，您必须运行 ，或者为了让 Nuxt 生成类型。如果在未运行开发服务器的情况下创建可组合对象，TypeScript 将引发错误，例如nuxi preparenuxi devnuxi buildCannot find name 'useBar'.

只需要设定好，在其他地方使用，无需引入
方法一：使用命名导出

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

方法2：使用默认导出

export default function () {
  return useState('foo', () => 'bar')
}

Plugins（插件目录）

Nuxt 会自动读取目录中的文件，并在创建 Vue 应用程序时加载它们。您可以在文件名中使用或后缀以仅在服务器端或客户端加载插件。

比如引入vantUI

import { defineNuxtPlugin } from '#app';
import vant from 'vant';
import '@vant/touch-emulator';
import 'vant/lib/index.css';
import VueLazyLoad from 'vue-lazyload'
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(vant),
  nuxtApp.vueApp.use(VueLazyLoad, {
    preLoad: 1.3,
    error: '',
    loading: '',
    attempt: 1
  })
})

比如引入naive-ui

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const { collect } = setup(nuxtApp.vueApp)
    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta
    nuxtApp.ssrContext = nuxtApp.ssrContext || {}
    nuxtApp.ssrContext.renderMeta = () => {
      if (!originalRenderMeta) {
        return {
          headTags: collect()
        }
      }
      const originalMeta = originalRenderMeta()
      if ('then' in originalMeta) {
        return originalMeta.then((resolvedOriginalMeta) => {
          return {
            ...resolvedOriginalMeta,
            headTags: resolvedOriginalMeta['headTags'] + collect()
          }
        })
      } else {
        return {
          ...originalMeta,
          headTags: originalMeta['headTags'] + collect()
        }
      }
    }
  }
})

只需要在nuxt.config.ts这样引入就是

plugins: [{ src: "~/plugins/vant.ts", ssr: false }],
  build: {
    transpile: ["swiper", "vant"],
  },