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

时间:2018-03-09 21:54:18

标签: vue.js vuejs2 vuetify.js

我必须构建3个不同的页面,每个页面都有不同的工具栏。 我知道在app.vue中,head部分被渲染,组件应该是body,所以只有app.vue部分的工具栏才有意义但是当我调用3时有3个不同的工具栏时问题就开始了组件。

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

这是一个代表"我希望实现。

  • Page1.vue - >工具栏1
  • Page2.vue - >工具栏2
  • Page3.vue - >工具栏3

2 个答案:

答案 0 :(得分:0)

我有类似的任务和我做的事情:

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

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

在此组件中,您应该只导入您的工具栏。

如果您使用vue-router,则可以使用挂钩来侦听页面路由。 或者你可以使用道具。

嗯,我不知道这是正确的解决方案,但它在我的案例中起作用

答案 1 :(得分:0)

如果工具栏之间没有任何重大差异,您可以使用插槽。详细了解他们here。希望这会有所帮助:)