首页 > 解决方案 > 选择要在 Vue.js 中的特定路由上显示的组件

问题描述

是否可以在路由中设置条件来决定在其中显示哪个组件?像这样的东西:

let someBoolean = true;

const routes = [
  { path: '/foo', component: someBoolean ? Foo : Baz },
  { path: '/bar', component: Bar }
]

并且布尔值可以更改。还应根据该组件进行选择。

标签: vue.jsvue-router

解决方案


根据Codesandbox,这是可能的。

但是,路由树是在应用程序启动时构建的,因此如果您通过应用程序中的操作更改变量,则不会发生任何事情,也不应该再次构建树。

编辑:

Vue Router 有一个 API,允许您在树构建后更新树。

你有Router.addRoute()这个技巧允许你将树重置为其初始状态并有条件地添加你想要保留的路由。


推荐阅读