vue router路由切换,如何统一进行控制?

Question

多个页面有一个通用的导航开关,现在就是切换路由的时候,如果发现导航处于打开状态,发送事件进行关闭.
请问 如果在统一的入口进行处理
目前采用的方案是 具有导航开关的模块 里面一个一个写代码 ,有精简的方案吗?

Answer 1

导航抽成单独的组件，并用navIsOpen状态管理 ,v-if or v-show

Answer 2

可以使用activeClass来指定。如：
<a v-link="{ path: '/a', activeClass: 'custom-active-class' }"></a>
链接请见：http://router.vuejs.org/zh-cn/link.html

Answer 3

主要得看你是用什麼控制導航的開關

假設現在的組件架構是：

App
---- Menu (導航)
---- Content (內容，也就是切換內容的地方)

那像是我把 Menu 包成組件，用 class 來控制開關的話：

<div class="menu open">...</div>

那在導航按下時，就要把 open 拿掉，直接用 v-link 會比較難處理，我會先綁定 @click="go('path/to')"，在 methods 中處理跳轉，像是

methods: {
    toggleMenu() {
            
        this.$el.classList.contains('open') 
            ? this.$el.classList.remove('open')
            : this.$el.classList.add('open')
    },
    go: function(path) {
        this.toggleMenu()
        this.$router.go(path)
    }
}

實現

jsFiddle