javascript - 求助,关于vue切换路由后的回调函数!

 mobiledu2502871951 发布于 2022-11-30 00:00

初始状态

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

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

5 个回答
  • next(function(vm){
        //形式参数vm 就是vue实例
    })
    2022-11-30 00:07 回答
  • 一个不太优雅的解决方案

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

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

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

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

    2022-11-30 00:07 回答
  • 不太了解vue,但是可以监听点击啊

    2022-11-30 00:07 回答
  • 你可以把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`
      }
    }
    2022-11-30 00:07 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有