如何在 vue.js 中为不同页面处理不同的工具栏



我必须构建 3 个不同的页面,每个页面都有不同的工具栏。我知道在 app.vue 中呈现了头部部分,组件应该是正文,因此在 app.vue 部分中只包含工具栏是有意义的,但是当我调用 3 个组件时,当我有 3 个不同的工具栏时,问题就开始了。

正确的方法是什么?我应该在组件本身中拥有工具栏,即使它将在主部分中呈现,还是应该在加载组件时以某种方式在 app.vue 上动态加载不同的工具栏?

这是我想实现的"代表"。

  • 第 1 页 -> 工具栏 1
  • 第 2 页 -> 工具栏 2
  • 第 3.vue 页 -> 工具栏 3

我有一些类似的任务和我做了什么:

使组件包装器<MyToolBar />并在其中使用:

<component :is='computedComponent'></component>

在这个组件中,你应该只导入你的工具栏。

如果你使用 Vue 路由器,你可以使用 hooks 来监听页面路由。或者你可以使用道具。

好吧,我不知道这是否是正确的解决方案,但它在我的情况下有效

如果工具栏之间没有任何重大差异,则可以使用插槽。在此处阅读有关它们的更多信息。希望这对:)有所帮助

最新更新