在 Nuxt 应用里,如果你想在用户打开特定路由之前去做一些事情,可以把这些事情放在路由中间件里。注意 Nuxt 有两种中间件,一种是在客户端运行的中间件,另外一种是在服务端运行的中间件。
定义在客户端运行的路由中间件,可以把它们放在项目的 middleware 目录的下面,在项目根目录的下面,新建一个目录,名字是 middleware,在这个目录下面新建一个文件,名字是 log.global.ts,在文件名里加上 global 这个后缀,表示这是一个全局中间件,也就是它会在所在路由上被执行上。如果不加这个 global 后缀,就是一个普通的中间件,我们可以在页面组件里指定要使用的中间件。
在这个中间件文件里默认导出一个中间件,定义路由中间件可以使用 Nuxt 提供的 defineNuxtRouteMiddleware 这个帮手方法。提供一个函数,在这个函数里可以设置要执行的东西。比如用一个 console.log ,在浏览器的控制台上输出一行文字: 全局中间件。
在浏览器测试一下,刷新一下页面,然后点击导航链接,打开路由地址,你会发现在控制台会输出 全局中间件 这几个字。
给这个 defineNuxtRouteMiddleware 提供的函数里面可以添加两个参数,第一个参数是 to,表示从哪里来,第二个参数是 from,表示到哪里去。这个 to 还有 from 这两个参数里会是路由相关的一些信息,比如里面有路由的地址,查询符,还有地址参数等等。
在输出的文字里面,全局中间件的后面加上一个冒号,然后是 从,后面输出 from.path ,再加上 到,再输出 to 这个参数里的 path。
回到浏览器再测试一下,点击导航链接,控制台上输出的文字里面,会包含 from 参数里的 path ,还有 to 参数里的 path。在路由中间件里可以利用这些数据先做一些判断,然后再决定去做一些事情。