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

2023-11-29

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

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

Thx


在路由器映射中使用 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()
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue.js - 同一路线上的两个不同组件 的相关文章

随机推荐

  • 如何在maven项目中添加类文件作为依赖项(而不是jar)?

    我有两个模块 A 和 B 它们位于同一个父级下 现在 A 需要 B 作为依赖 我不能只用jar作为依赖类型 因为模块 B 正在使用spring boot maven plugin 所以我想知道如何设置A的pom配置以使A不依赖于B的编译类j
  • 如何使用 Plone 4 删除编辑模式下的 portlet?

    我习惯在 Plone 3 下通过覆盖 Portal skin 下的 base edit cpt 文件并将列设为空来实现此目的
  • 具有给定纵横比的树形图

    我想创建一个TreeMap 用图片来填写treemap矩形 我可以假设所有图片都具有相同的宽度和高度 即长宽比 因此 我需要一个treemapping算法来创建具有给定比例的矩形 我是否能够将图片放在那里 如果需要 也许可以缩放图片 你能推
  • 查找对象数组中某个属性具有最大值的所有对象,并返回同一对象中其他属性的值

    我知道这里有类似的问题 但使用这些方法只返回一个最大值 我需要的是确定数组的哪些对象在给定属性中具有最大值并返回某个值 other 那些在给定属性中具有最大值的对象中的属性 我有这个对象数组称为week有两个属性 name and 交通 n
  • 简单的 ContainerView 导致“不再支持使用 defaultContainer”。

    使用最新的 Ember 以下简单的 ContainerView 会导致错误 弃用 不再支持使用 defaultContainer defaultContainer lookup 请参阅 http git io EKPpnA 我想这与我将视图
  • 你能在 swift 中强制执行类型别名吗

    我正在尝试强制执行一个由Int不会与其他的混在一起Ints 假设您有以下类型别名 typealias EnemyId Int typealias WeaponId Int 我希望以下内容出现编译器错误 var enemy EnemyId E
  • Azure Linux Web 应用程序上的 ASP.NET Core NodeServices

    我习惯在 Windows 上发布 Azure WebApps 但现在我尝试将 ASP NET Core 3 带有 NodeServices 部署到 Linux WebApp 并且收到以下错误消息 InvalidOperationExcept
  • Spring Kafka - 在运行时订阅新主题

    我正在使用注释 KafkaListener使用我的应用程序上的主题 我的问题是 如果我在 kafka 中创建一个新主题 但我的消费者已经在运行 那么消费者似乎不会选择新主题 即使它与topicPattern我在用着 有没有办法定期 刷新 订
  • JavaScript 匿名函数中的 this 值

    谁能向我解释为什么A是真的并且B是假的吗 我本以为 B 也是如此 function MyObject MyObject prototype test function console log A this instanceof MyObje
  • 如何通过单击按钮打开 Whatsapp 群组?

    我制作了一个简单的电话簿 并且可以通过单击按钮打开 Whatsapp 联系人 这是示例代码 Intent intentWhatsapp new Intent android intent action MAIN intentWhatsapp
  • 覆盖默认身份表名称

    我想重命名默认的身份表名称 AspNet角色 AspNet用户索赔 AspNet用户登录 AspNet用户角色 AspNet用户 我了解如何使用 EF6 执行此操作 protected override void OnModelCreati
  • 跨域单选登录

    它不是我正在寻找的明确的跨域会话 但它是解释我想要的内容的最简单方法 我有一个创建网站的系统 这些网站托管在许多不同的服务器上 用户可以创建他们的帐户 然后他们可以创建很多网站 他们可以创造 www mysite com 子域名 mysit
  • Guice:如何在没有注入器或使用构造函数注入的情况下获取单例实例

    我有一个单例类定义为 Singleton class MySingletonClass 我有另一个使用此单例类的类 但必须使用 new 运算符创建该类 因此我不能使用构造函数注入或设置器注入等 class MyClass public vo
  • Javascript 查找链接的颜色

    所以我遇到的问题基本上已经解决了 我有一个 HTML 格式的外部网站列表 如下所示 a href http google com au http google com au a br a href http stackoverflow co
  • React-router-Dom:在 React 中重定向多个用户登录后的空白页面

    我的反应项目中有两个 用户和管理员 用户 我想在成功登录后将他们重定向到他们受尊重的页面 为了实现这一目标 我创建了一个名为的独立组件authenticatedRoute js并通过 AuthenticatedRoute 组件包装这些组件
  • PL/SQL 中的转义下划线

    我有一个与此类似的 oracle 触发器 AFTER INSERT OR UPDATE ON TABLE ABC FOR EACH ROW BEGIN IF new COLUMN A LIKE H THEN INSERT INTO TABL
  • 无法从 boost 子进程获取分段错误退出代码

    当子进程由于分段违规或除数为零或任何其他终止信号而被终止时 我试图获取子进程的退出代码 使用 boost process 和 boost asio 退出代码和错误代码始终返回 0 和成功 我在 CentOS 7 上使用 g 4 8 5 和
  • 将 hashmap 转换为 JSON 对象时从 Gson 获取 stackoverflowerror

    我想将树结构中的数据表示为 java 对象 然后我想将其转换为 JSON 对象 在 stackoverflow 条目的帮助下 将父 子关系的java arrayList转换为树 使用 GSON 将 hashmap 转换为 JSON 我有以下
  • 在 C 中为 Fortran 可分配内存分配内存

    我们试图在 C 中接管旧版 Fortran 代码 100 000 行代码 的内存分配 因为我们使用 C 库在集群上分区和分配分布式内存 可分配的变量在模块中定义 当我们调用使用这些模块的子例程时 索引似乎是错误的 移动了一位 然而 如果我们
  • Vue.js - 同一路线上的两个不同组件

    我试图弄清楚如何使用 Vue 在同一条路线上拥有 2 个不同的组件 主页或登录页面 取决于用户是否经过身份验证 也许我在文档中遗漏了一些东西 但我无法也无法弄清楚 有可能吗 Thx 在路由器映射中使用 auth 参数 router map