在 Nuxt.js 中为动态路由/页面设置默认值？答案

【问题标题】：Set default value for a dynamic route/ page in Nuxt.js?在 Nuxt.js 中为动态路由/页面设置默认值？
【发布时间】：2021-06-15 08:25:51
【问题描述】：

当有人提到我的网站时，我希望 URL 看起来像这样

localhost:3000/<dynamic affiliate username>/home

但是当某人没有被提及我的网站并且是访客时，我希望 URL 默认为类似这样的内容

localhost:3000/www/home

有没有办法让我使用 Nuxt.js 为动态路由/页面设置默认值？

【问题讨论】：

标签： javascript vue.js express routes nuxt.js

【解决方案1】：

使用middleware

1。页面中间件

您可以在中间件中检查用户（通过 cookie 或您使用的其他东西。在此示例中，我使用了 nuxt auth module）

命名中间件

/* pages/_user/home.vue */
export default {
  middleware: "auth"
}

匿名的

/* pages/_user/home.vue */
export default {
  middleware({ $auth, redirect }) {
    if(!$auth.loggedIn) {
      redirect("/www/home")
    }
  }
}

2。路由器中间件

如果你想在项目中全局应用这个逻辑（例如在_user页面的每个子路由上），你可以在nuxt.config.js中设置路由中间件

/* nuxt.config.js */
export default {
  router: {
    middleware: ["auth"] // or "auth" for single middleware 
  }
}

/* middleware/auth.js */
export default ({ $auth, route, redirect }) => {
  if(funcToDetectUserPage(route.path)) {
    if(!$auth.loggedIn) {
      redirect("/www/home");
    }
  }
}

【讨论】：