Vue.js 路由器 - 条件组件渲染 [英] Vue.js router - conditional component rendering

问题描述

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

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

I've added a getter and seems to work fine but any variable or function i use in the if statement is undefined. even i've tried using global prototype.$var and mixin functions still with no success.

我需要的是，如果用户登录路径/"呈现仪表板视图，如果没有，则登录呈现为/".

All i need is if a user is logged in the path '/' renders Dashboard view and if not then Login is rendered to '/'.

注意:我使用过 beforeEnter: 并且它工作正常.但我不想重定向.

Note: I've used beforeEnter: and it works fine. but i don't want redirection.

推荐答案

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

Using your approach this is what I found is working:

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

这篇关于Vue.js 路由器 - 条件组件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！