为每个路由器视图设置不同的指令

Question

https://jsfiddle.net/guanzo/8fdbcaxo/2/

Vue 实例有 2 个router-view，foo 和 bar。我如何根据router-view 是foo 或bar 组件有条件地设置指令？现在我不得不对这两个子组件给出相同的指令，但是如果我想以不同的方式处理它们怎么办？

类似的东西

<router-view v-if="isFoo" v-show="showFoo" ></router-view>
<router-view v-else-if="isBar" @click="handleClick" ></router-view>

Answer 1

一种方法是有两个独立的命名router-views，这样您就可以将指令附加到您想要的特定router-view。

I've updated your fiddle to demonstrate this.

不过，不要过度使用它。想想谁应该负责处理点击事件 - App 或 Bar？如果是后者，您可能希望将指令放在 Bar 组件中并与父组件通信。