Vue Router 只能从某个页面访问路由

Question

用户首次登录后，我将他重定向到 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' })
    }
  }
}

谢谢！！

Answer 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' })
  }
}

Vue Router 只能从某个页面访问路由

Vue Router access route only from certain page

javascript

vue.js

vue-router

vuex

vuejs2