如何在Nuxt SSR的middleware中获取$route和$router对象？

错误原因 #

你代码中对middleware上下文对象的属性引用不符合Nuxt官方规范，$route、$router不是context的直接挂载属性，不同版本的正确实现方式如下：

Nuxt2 修正方案 #

• 路由查询参数直接通过context.route获取，无需加$前缀
• 重定向操作优先使用内置的context.redirect方法，无需手动调用router实例；若确实需要获取router实例，可通过context.app.router访问

修正后代码：

async middleware(context) {
    if (!context.route.query.token) {
        const result = await context.$api.campaigns.createNewShare();
        context.redirect({
            name: 'campaigns-new', 
            query: {token: result.data.token}
        });
    }
},

Nuxt3 修正方案 #

Nuxt3的页面中间件使用defineNuxtRouteMiddleware定义，直接通过入参to获取路由信息，重定向使用navigateTo方法：

export default defineNuxtRouteMiddleware(async (to) => {
    if (!to.query.token) {
        const result = await $api.campaigns.createNewShare();
        return navigateTo({
            name: 'campaigns-new', 
            query: {token: result.data.token}
        });
    }
})

内容的提问来源于stack exchange，提问作者Čamo