关于vue路由监听事件跳转的问题

 更新时间:2022年08月05日 15:34:02   作者:任性飞翔  
这篇文章主要介绍了关于vue路由监听事件跳转的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue路由监听事件跳转

1.监听路由触发事件的语法

 watch: {
    $route: function clearSelectionRow() {
      console.log("success");
      this.$emit("setSelectionFile", []);
    },
  }

代码实现功能:当本页面路由发生变化的时候,执行回调函数clearSelectionRow();

2.可能遇到的问题

①$route后接函数,函数可以是现定义的,也可以是在methods方法中已经定义完成的;

②监听watch封装在最底层的组件的时候,注意跳转后该组件是否摧毁重建;如果被摧毁重建,路由监听触发事件将不执行,摧毁重建:一个组件调用两次分别显示,在页面上无区别,但是是同意组件的再次渲染,定义在该组件上的路由变化将监听不到。

解决方法:将路由监听放在一直不变的主页面index.vue上.

③当需要在同一属性下执行多个回调函数的时候,将函数以对象的形式放在数组中

$route: [
      function clearSelectionRow() { //回调函数1
        this.$emit("setSelectionFile", []);
      },
      {//回调函数2
        handler(route) {
          
      },
    ],

vue路由监听不到怎么办

最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。

方法一

路由包含子路由

{
  name: 'home',
  component: Home,
  path: '/home',
  children: [
    {
      path: 'main',
      name: 'main',
      component: Main,
    },
    {
      path: 'login',
      name: 'login',
      component: Login,
    },
  ]
}

在几个子路由之间跳转就能保证监听到路由变化

方法二

监听$route.path对象

watch: {
    "$route.path":{
      handler(to, from) {
        console.log('to:::', to);
        console.log('from:::', from);
      },
      deep: true
    }
  }

如果我们的路由没有子路由,想要实现监听可以使用$route.path进行深度监听,这样也能监听到路由变化了。

方法三

使用vue自带的路由守卫beforeRouteEnter ,beforeRouteUpdate ,beforeRouteLeave

beforeRouteEnter (to, from, next) {
    next(vm => {
        // 通过 `vm` 访问组件实例
      })
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }

据说还能通过设置keep-alive来保证路由被监听到,这个我最近还没用的,有用过的小伙伴可以分享一下。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE中操作dom元素的几种方法(最新推荐)

    VUE中操作dom元素的几种方法(最新推荐)

    本文给大家总结了Vue中操作dom元素的多种方法,每种方法结合实例代码给大家讲解的非常详细,需要的朋友参考下吧
    2022-12-12
  • vue选项卡Tabs组件实现示例详解

    vue选项卡Tabs组件实现示例详解

    这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue组件之间的数据共享详解

    Vue组件之间的数据共享详解

    这篇文章主要为大家介绍了Vue组件之间的数据共享,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细过程

    Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细

    v-model 是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如 input、checkbox 等,咱可以在自定义组件中实现 v-model,这篇文章主要介绍了Vue3 SFC 和 TSX 方式自定义组件实现 v-model,需要的朋友可以参考下
    2022-10-10
  • vue下拉列表的两种实现方式比较

    vue下拉列表的两种实现方式比较

    这篇文章主要介绍了vue下拉列表的两种实现方式比较,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • vue3+TypeScript+vue-router的使用方法

    vue3+TypeScript+vue-router的使用方法

    本文详细讲解了vue3+TypeScript+vue-router的使用方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • vue使用video.js进行视频播放功能

    vue使用video.js进行视频播放功能

    video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放,这篇文章主要介绍了vue中使用video.js进行视频播放,需要的朋友可以参考下
    2019-07-07
  • Vite配置文件如何加载深入剖析

    Vite配置文件如何加载深入剖析

    我们知道,Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,但不管是哪种环境,Vite 都会首先解析用户配置,那接下来,本文就来与大家分析配置解析过程中 Vite 到底做了什么?即Vite是如何加载配置文件的
    2023-11-11
  • Element el-checkbox-group v-model不支持对象(object)解决方案

    Element el-checkbox-group v-model不支持对象(object)解决方案

    本文主要介绍了Element el-checkbox-group v-model不支持对象(object)解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 浅谈vue中组件绑定事件时是否加.native

    浅谈vue中组件绑定事件时是否加.native

    今天小编就为大家分享一篇浅谈vue中组件绑定事件时是否加.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论