用户登录

在 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。在路由中间件里可以利用这些数据先做一些判断,然后再决定去做一些事情。

Nuxt 应用里的客户端路由中间件(Middleware)《 Nuxt.js:应用路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点