Vue.js - 同一路线上的两个不同组件

Question

我想弄清楚如何在Vue的同一路线上有两个不同的组件。

主页或登录页面取决于用户是否通过身份验证。 也许我错过了文档中的某些东西，但我无法找到它。它甚至有可能吗？

THX

Answer 1

路由器地图使用AUTH PARAM：

router.map({ 
    '/home': { 
    component: Home, 
    auth: true 
    }, 
    '/login': { 
    component: Login 
    }, 
    '/something': { 
    component: Something, 
    auth: true 
    }, 
}) 

，然后每次转换前检查：

router.beforeEach(function (transition) { 
    if (transition.to.auth && !auth.user.authenticated) { 
    transition.redirect('/login') 
    } else { 
    transition.next() 
    } 
}) 

Answer 2

所以，你需要动态组件。

在哪个Vue公司是父母对这些组件使用一个计算的属性，返回要使用组件的名称，根据认证状态：

//- in your js 
// insert into the vue instance definition, assuming you have an authencation 
// property somewhere, eg session.isAuthenticated 
... 
components: { 
    MainComponent, 
    LoginComponent 
}, 
computed: { 
    useComponent() { 
    return session.isAuthenticated ? 'MainComponent' : 'LoginComponent' 
    } 
} 
... 

//- in your template html 
<component :is='useComponent' /> 

http://vuejs.org/guide/components.html#Dynamic-Components