Vue.js - 同一路线上的两个不同组件 [英] Vue.js - two different components on same route

问题描述

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

I'm trying to figure out how to have 2 different components on same route with Vue.

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

Main page or login page, depends if user is authenticated. Maybe im missing something in documentation, but i cant and cant figure it out. Is it even possible?

谢谢

推荐答案

use auth param in router map:

use auth param in router map:

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

然后在每次转换之前检查:

and then check before each transition:

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

这篇关于Vue.js - 同一路线上的两个不同组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！