美文网首页
vue中使用watch监听$route 无效问题

vue中使用watch监听$route 无效问题

作者: 子语喵 | 来源:发表于2020-11-26 11:28 被阅读0次

路由:

{ // 首页
  path: '/',
  name: 'index',
  component: resolve => require(['@/views/index/index'], resolve),
},

监听:

watch: {
  '$route'(to, from) {
    console.log(to, from)
  }
},
{ // 首页
  path: '/',
  name: 'index',
  component: resolve => require(['@/views/index/index'], resolve),
  children: [
    {
      path: 'user',
      name: 'user',
      component: resolve => require(['@/views/index/user'], resolve),
    },
    {
      path: 'userName',
      name: 'userName',
      component: resolve => require(['@/views/index/userName'], resolve),
    },
  ]
},

发现页面跳转时,并没有监听输出内容,就是没有监听到。路由组件的渲染区域为 router-view,作为顶层出口(官方是这么叫的)它将匹配到的路由组件渲染在该区域中。所以就是需要有子路由才可以监听到!

相关文章

  • vue中使用watch监听$route 无效问题

    路由: 监听: 发现页面跳转时,并没有监听输出内容,就是没有监听到。路由组件的渲染区域为 router-view,...

  • vue监听和webpack基本使用

    vue监听 使用keyup监听 使用watch监听文本框变化,watch 使用这个属性可以监视data中的数据变化...

  • vue小结

    1.vue常用对象 2. Vue中watch的用法 (1)监听route使用场景:当两个路由指向同一个组件是,修改...

  • 【vue3.0】vue3.0中监听路由router变化

    问题:vue3.0中的监听路由已经不能使用watch的方法 改进方式,使用onBeforeRouteUpdate ...

  • vue 同时监听多个值的变化

    使用computed 和watch来同时监听多个属性值。。 参考原文:vue 使用watch同时监听多个属性[ht...

  • vue组件传值&vuex

    vue技术分享 目录 vue组件之间的通信 vue中数据监听watch的使用 vuex状态管理 vue-aweso...

  • vue技巧:监听路由

    实现对route的监听 你肯定想不到,再watch中竟然能够监听route,是的因为你很多时候 需要做tab的跳转...

  • 微信小程序之watch属性值(仿Vue)

    Vue通过监听watch属性来观测Vue实例数据的变化。 监听器的原理,将data中需监听的属性写在watch对象...

  • vue-router 路由写法

    vue $route 深度监听

  • vue -- watch、组件

    描述1:vue列表编辑使用弹框子组件,点击编辑获取不到正确的详情信息 解决:用watch监听id,watch监听的...

网友评论

      本文标题:vue中使用watch监听$route 无效问题

      本文链接:https://www.haomeiwen.com/subject/peyaiktx.html