Nuxt3项目实战篇3——中间件

Nuxt 提供了一个可定制的路由中间件框架，可以在整个应用程序中使用它，适合在导航到特定路由之前运行你想要运行的代码。

路由中间件分为三种：前两种路由中间件可以定义在definePageMeta .

• 匿名（或内联）路由中间件，直接在使用它们的页面中定义。
• 命名路由中间件，放置在middleware/目录中，在页面使用时会通过异步导入自动加载。（注意：路由中间件名称被规范化为 kebab-case，因此someMiddleware变为some-middleware。）
• 全局路由中间件，放置在middleware/目录中（带.global后缀），每次路由更改都会自动运行。

要使用中间件，首先要明白中间件可以干什么，我们为什么要使用中间件。

中间件的作用：1. 鉴权，2. 路由守卫

现在我们看看中间件怎么使用

1. 第一种使用方式

<script setup>
definePageMeta({
  middleware: (to) => {
    return navigateTo('/aboutus')
  },
})
</script>

我在index页下面添加了这行代码，我的首页被直接重定向到了aboutus

2.第2种使用方式。 我们看看怎么鉴权: 在middleware文件夹下面新建auth.js文件，

<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>


//auth.js内容
export default defineNuxtPlugin(() => {
 //  可以使用addRouteMiddleware()辅助函数手动添加全局或命名路由中间件，例如在插件中。
  addRouteMiddleware('global-test', () => {
    console.log('this global middleware was added in a plugin and will be run on every route change')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')
  })
})

第三种使用方式：首先在middleware下新建route.global.js

//因为有.global，每次路由更改时这个文件都会自动运行， 不需要额外引入或者使用definePageMeta.
export default defineNuxtPlugin((to) => {
  //通过useNuxtApp可以获取当前页的参数
  const { $config } = useNuxtApp()
  //使用vue-router做路由守卫也行，很灵活
  const { beforeEach, } = useRouter();
 
  if (to.path === '/product') {
    return navigateTo('/product/1',{ replace: true })
  }
  if (to.path === '/index') {
    return navigateTo('/',{ replace: true })
  }
})

middleware做路由拦截， 导航守卫。发现一个坑人的地方，我想做的是，用户点击到某个地址的时候，url地址自动redirect到我指定的页， 例如，我的产品页，因为只有一个产品，所以我需要用户去/product时就直接跳转到/product/1。 但是后台却一直提示[Vue Router warn]: No match found for location with path "/product",  虽然阿不影响使用，但是这个提示看着糟心呀

表达能力有限，感觉讲得不是很清楚，请多多包涵。 源码地址：https://gitee.com/running-team/nuxt3-chapter3.git