Vue.js 路由器 - 条件组件渲染

Question

 routes: [
{
  path: '/',
  name: 'home',
  get component(){
    if(Vue.loggedIn){
      return Home
    }else{
      return Login
    }
  }  
}

我添加了一个吸气剂，似乎工作正常，但我在 if 语句中使用的任何变量或函数都是未定义的。即使我尝试使用全局prototype.$var和mixin函数仍然没有成功。

我所需要的是，如果用户登录到路径“/”，则呈现仪表板视图，如果没有，则登录将呈现为“/”。

注意：我用过 beforeEnter: 并且效果很好。但我不想重定向。

Answer 1

使用你的方法，我发现这是有效的：

routes: [
{
  path: '/',
  name: 'home',
  component: function () {
    if(loggedIn){
      return import('../views/Home.vue')
    }else{
      return import('../views/Login.vue')
    }
  }  
}

Answer 2

在我的应用程序中，我使用 arouter.beforeEach来检查用户是否已登录。我使用 agetter来检查登录状态是否正确。我还使用元仅根据用户是否登录来显示视图。

我将此代码应用于应用程序的入口点main.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!store.getters.loggedIn) {
      next({
        path: '/login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    // this route is only available to a visitor which means they should not be logged in
    // if logged in, redirect to home page.
    if (store.getters.loggedIn) {
      next({
        path: '/',
      })
    } else {
      next()
    }
  }
})

在我的router.js文件中，我的元设置如下

routes: [
  {
    // this is the route for logging in to the app
    path:      '/login',
    name:      'login',
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
    props:     true,
    meta:      {
      requiresVisitor: true,
      layout:          'landing',
    },
  },
  {
    // this is the dashboard view
    path:      '/',
    name:      'dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
    meta:      {
      requiresAuth: true,
      layout:       'default',
      breadCrumb:   [
        { name: 'Dashboard' }
      ]
    }
  },
]

注意元对象。如果您使用 vue devtools，您将看到这些参数可用于验证。