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

【问题标题】：Vue.js - two different components on same routeVue.js - 同一路线上的两个不同组件
【发布时间】：2016-10-07 00:50:46
【问题描述】：

我正在尝试弄清楚如何使用 Vue 在同一条路线上拥有 2 个不同的组件。

主页或登录页面，取决于用户是否经过身份验证。也许我在文档中遗漏了一些东西，但我无法也无法弄清楚。有没有可能？

谢谢

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

所以你需要动态组件。

无论哪个 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

【讨论】：

【解决方案2】：

在路由器映射中使用 auth 参数：

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()
  }
})

【讨论】：