在 vue.js 中使用 if 条件进行路由

【问题标题】：Routing with if condition in vue.js在 vue.js 中使用 if 条件进行路由
【发布时间】：2021-06-18 13:47:14
【问题描述】：

这是我在 router.js 文件中的代码

 {
      name: "Admin",
      path: "/admin/",
      component: () => import("@/views/admin/Index"),
      children: [
      
        // Dashboard
        {
          name: "Dashboard",
          path:   "dash",
          component: () => import("@/views/admin/Dash"),
        },
        {
          name: "Campaign Management",
          path: "campaign",
          component: () =>
          import("@/views/CampaignManagementNew/CampaignManagment"),
        },
   ]
}

我在 localStorage 中设置了一个变量“状态”。

我只想路由，如果 'status' 为真（localStorage 项）。否则，我不需要路由到子组件。

如何使用 if 条件进行路由？

【问题讨论】：

您需要的是导航仪。在此处查看更多信息router.vuejs.org/guide/advanced/…

标签： javascript vue.js if-statement routes vuetify.js

【解决方案1】：

您想实现一个非常常见的模式来“保护”标志后面的路线。为了实现这一点，您应该将meta 属性添加到要在辅助检查（localStore 值）之后“保护”的路由。然后，您将需要创建一个路由器守卫来检查元标志并根据这些条件路由用户。

你可以在这里看到一个例子：https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields

在您的情况下，您可能希望将 auth.loggedIn() 替换为可以检查 localStorage 值的函数。所以是这样的：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresLocalStorageValue)) {
    if (!checkLocalStorageValue()) {
      next({ path: '/not-authorized-page-missing-local-store'})
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

【讨论】：