Vue Router 仅从特定页面访问路由

【问题标题】：Vue Router access route only from certain pageVue Router 仅从特定页面访问路由
【发布时间】：2021-05-21 13:31:22
【问题描述】：

用户第一次登录后，我将他重定向到页面CreateProfile，他在该页面中输入所有个人资料信息。之后我想让这个网站不再可以访问，比如用户在浏览器中输入 URL（例如www.myproject.com/createProfile）。

如何确保只有来自我的登录页面的重定向才能访问 CreateProfile 页面？也就是说，如果用户手动输入 URL，他将被重定向，例如到 404 页面。

目前我的 CreateProfile 路线如下所示：

{
  path: '/createprofile',
  name: 'CreateProfile',
  component: CreateProfile,
  beforeEnter: (to, from, next) => {
    if (store.getters.getUserStatus == true) {
      next()
    } else {
      next({ name: 'Login' })
    }
  }
}

谢谢！！

【问题讨论】：

标签： javascript vue.js vuejs2 vuex vue-router

【解决方案1】：

您可以检查beforeEnter导航守卫中的from路由对象来测试之前的路由位置。

例如，检查from.name 属性是否为Login，只有当您需要重定向时才会为true。（假设您还没有提供来自Login 的<router-link>）：

beforeEnter: (to, from, next) => {
  const isRedirected = from.name === 'Login';
  if (isRedirected && store.getters.getUserStatus == true) {
    next()
  } else {
    next({ name: 'Login' })
  }
}

【讨论】：