初始状态
点击收件箱旁边的按钮,弹出侧边栏,有俩路由按钮
点击切换路由后,隐藏侧边栏(现在的问题就在这里,我需要在点击切换路由后的回调函数里面做一步操作,就是修改vue实例的一个属性值,这个属性值用来控制侧边栏的隐藏和显示),
router.beforeEach(function(to, from, next){}); 发现文档上有这个回调,但是里面无法访问vue的实例啊,求大神帮忙看看
next(function(vm){ //形式参数vm 就是vue实例 })
一个不太优雅的解决方案
给侧边栏内的链接添加点击事件,在点击事件里面控制显示属性的值和路由跳转
看问题感觉应该就是非父子组件间如何进行通信了
可以借助事件
浏览器原生的事件系统即可,在侧边栏组件中监听收起侧边栏
的事件,在afterEach导航钩子中触发收起侧边栏
事件
其实vue本身有实现一套事件机制 http://cn.vuejs.org/v2/api/#v...
不过注意到描述
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
你的场景明显不是当前实例
也并非父子组件
所以感觉不太适用.至于有没有对应的全局方法我就不是很清楚了,你可以自己去试下或者找下
而麻烦一点(个人认为更为合理)的做法是使用vuex一类的状态管理容器
可以把是否收起侧边栏
作为一个状态
保存起来,而侧边栏组件(或者它的父组件)则根据这个状态去决定是否显示,再来就在afterEach或者beforeEach中调用action
去等更新状态
即可
不太了解vue,但是可以监听点击啊
你可以把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` } }