求助，关于vue切换路由后的回调函数！

Question

初始状态

点击收件箱旁边的按钮，弹出侧边栏，有俩路由按钮

点击切换路由后，隐藏侧边栏（现在的问题就在这里，我需要在点击切换路由后的回调函数里面做一步操作，就是修改vue实例的一个属性值，这个属性值用来控制侧边栏的隐藏和显示），
router.beforeEach(function(to, from, next){}); 发现文档上有这个回调，但是里面无法访问vue的实例啊，求大神帮忙看看

Answer 1

next(function(vm){
    //形式参数vm 就是vue实例
})

Answer 2

你可以把beforeEach的逻辑写道组件里啊

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是改组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

Answer 3

一个不太优雅的解决方案

给侧边栏内的链接添加点击事件，在点击事件里面控制显示属性的值和路由跳转

Answer 4

看问题感觉应该就是非父子组件间如何进行通信了
可以借助事件
浏览器原生的事件系统即可,在侧边栏组件中监听收起侧边栏的事件,在afterEach导航钩子中触发收起侧边栏事件
其实vue本身有实现一套事件机制 http://cn.vuejs.org/v2/api/#v...
不过注意到描述

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

你的场景明显不是当前实例也并非父子组件所以感觉不太适用.至于有没有对应的全局方法我就不是很清楚了,你可以自己去试下或者找下
而麻烦一点(个人认为更为合理)的做法是使用vuex一类的状态管理容器
可以把是否收起侧边栏作为一个状态保存起来,而侧边栏组件(或者它的父组件)则根据这个状态去决定是否显示,再来就在afterEach或者beforeEach中调用action去等更新状态即可

Answer 5

不太了解vue，但是可以监听点击啊