代码先锋网 代码片段及技术文章聚合

vue监听路由变化

技术标签: Vue

获取route

第一种

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to);
  }
}

第二种

watch: {
  '$route':'routeChange'
},
methods: {
  routeChange(){
    console.log(this.$route);
  }
}

第三种

watch: {
      // 在值发生变化之后,重新加载数据
      $route: {
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }

获取route.path

watch: {
      // 在值发生变化之后,重新加载数据
      "$route.path": {
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }

获取route.name

watch: {
      // 在值发生变化之后,重新加载数据
      "$route.name": { //
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串, oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }
版权声明:本文为weixin_41977619原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41977619/article/details/110875100

智能推荐

vue 监听路由变化

一.watch监听$route($router的对象) 二. vue-router 的钩子函数(写在与methods同级的地方或者router中) 完整的导航解析流程 导航被触发。 在失活的组件里调用 beforeRouteLeave 守卫。 调用全局的 beforeEach 守卫。 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 在路由配置里调用 beforeEnt...

vue 监听路由变化

方法一:通过 watch 或 或  ...

vue监听路由变化

1、 2、 3、...

猜你喜欢

vue监听路由的变化

vue监听路由的变化 to , from 分别表示从哪跳转到哪,都是一个对象 to.path ( 表示的是要跳转到的路由的地址 eg: /home );...

vue监听路由参数变化

问题来源:项目中突然发现同一路由参数变化页面中一系列的生命周期函数一动不动,这样我怎么渲染页面?难道让我刷新页面,对于这个小学二年级水平的操作,我表示拒绝。   解决办法:在vue项目中一说监听改变数据。应该第一时间想起watch,对,没错就是它,直接上代码。 代码如下:...

Vue监听路由的变化

一加载进来在mounted中获取初始值,之后在watch中监听变化。...