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

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-view，这样您就可以将指令附加到您想要的特定router-view。

I've updated your fiddle to demonstrate this.

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