在路由器文件中，父路由和子路由使用相同的路径，请从子组件中删除/，否则，它将被视为根路径。

{
    // student login
    path: '/login',
    name: 'login',
    component: () => import('layouts/student/MainLayout.vue'),
    children: [
      { path: 'login', name: 'Login page', component: () => import('pages/student/LogInPage.vue')}
    ],
    meta: { preventLoginUser: true },
    props: true
  },

请注意，这将生成路由/login/login。
如果需要使用/login，请将子路由更改为

{
    // student login
    path: '/login',
    component: () => import('layouts/student/MainLayout.vue'),
    children: [
      { path: '', name: 'login', component: () => import('pages/student/LogInPage.vue')}
    ],
    meta: { preventLoginUser: true },
    props: true
  },

如何使用

当你想为父路由创建嵌套路由时，你只需要使用children键。如果你定义的是单个路由，就像在这个例子中，那么就不需要使用children键。所以在上面的例子中，你可以定义path，name，component和meta参数如下：

{
  path: '/login',
  name: 'login',
  component: () => import('layouts/student/LogInPage.vue'),
  meta: { preventLoginUser: true },
  props: true
}

称之为：

this.$router.push({ name: 'login' }); // because "name: 'login'" in route

路由参数

我不知道你的“data”参数在你的例子中是什么意思。如果你想在路由中使用一个变量，你需要这样做：

{
  path: '/login/:myparameter',
  name: 'login',
  component: () => import('layouts/student/LogInPage.vue'),
  meta: { preventLoginUser: true },
  props: true
}

称之为：

this.$router.push({ name: 'login', params: { myparameter: '1' } });

在调用Route --〉“Guard”之前运行函数

如果参数的目的是检查调用它的用户是否登录，那么有一个更好的解决方案。您可以在每个路由之前声明自己的逻辑，以确定路由应该如何运行。例如，对于/login路由，如果您希望它在用户已经登录的情况下自动重定向到/admin路由。

// in this code, the isLoggedIn() declare your authentication logic, return true if logged and false if not

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('layouts/student/LogInPage.vue'),
    meta: { preventLoginUser: true },
    props: true
  },
  // ...
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // if call "login", but logged
  if (to.name === 'login' && isLoggedIn()) {
    // redirect to "admin"
    next('/admin')
  }
  // if not...
  else {
    // continue redirect to called route
    next()
  }
})

Vue路由器示例

为什么需要MainLayout.vue？

Layout和Page之间有一个显著的区别。我会从一开始就把它们放在单独的文件夹中：/layouts和/pages。
如果MainLayout.vue是所有页面的全局布局，则可以将其单独包含在LogInPage.vue中。
By Vue Router

CamelCase名称

我还注意到，name属性始终只是一个名称，您可以稍后引用此路由。因此，您不必记住操作的URL地址，只需请求名为login的路由。如果路由名称是Login Page，则很难立即记住，并且您只会让事情变得更难。
如果您仍然需要使用多个单词的名称，则值得考虑省略空格并使用CamelCase，例如loginPage。