vue监听路由实时变化

墨蓝 2023-07-03 04:54 33阅读 0赞

## 方法一：通过 watch ##

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

或

// 监听,当路由发生变化的时候执行
    watch: { 
      $route: { 
        handler: function(val, oldVal){ 
          console.log(val);
        },
        // 深度观察监听
        deep: true
      }
    },

或

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

## 方法二：：key是用来阻止“复用”的。 ##

Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

<router-view :key="key"></router-view>
     
    computed: { 
      key() { 
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
    }

使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

## 方法三：：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave ##

<script>
      // 引入 Tabbar组件
      import mTabbar from './components/Tabbar'
      import mTabbarItem from './components/TabbarItem'
      // 引入 vuex 的两个方法
      import { mapGetters, mapActions} from 'vuex'
     
      export default { 
        name: 'app',
        // 计算属性
        computed:mapGetters([
          // 从 getters 中获取值
          'tabbarShow'
        ]),
        // 监听,当路由发生变化的时候执行
        watch:{ 
          $route(to,from){ 
            if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine'){ 
              /** * $store来自Store对象 * dispatch 向 actions 发起请求 */
              this.$store.dispatch('showTabBar');
            }else{ 
              this.$store.dispatch('hideTabBar');
            }
          }
        },
        beforeRouteEnter (to, from, next) { 
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不！能！获取组件实例 `this`
          // 因为当钩子执行前，组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) { 
          // 在当前路由改变，但是该组件被复用时调用
          // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
          // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) { 
          // 导航离开该组件的对应路由时调用
          // 可以访问组件实例 `this`
        },
        components:{ 
          mTabbar,
          mTabbarItem
        },
        data() { 
          return { 
            select:"Building"
          }
        }
      }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue监听当前页面的地址变化/路由变化

转载自: Heap Stack(Pingbook) [https://pingbook.top/vue-watch-current-url-route-change/][htt

野性酷女/ 2023年08月17日 16:37/ 0 赞/ 147 阅读

相关 vue监听路由实时变化

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ cons

墨蓝/ 2023年07月03日 04:54/ 0 赞/ 34 阅读

相关 VUE_vue监听路由变化

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ cons

小鱼儿/ 2023年01月14日 01:41/ 0 赞/ 178 阅读

相关 Flutter 全局监听路由堆栈变化

监听路由堆栈的变化使用 RouteObserver ，首先在 MaterialApp 组件中添加 `navigatorObservers`： void main()

曾经终败给现在/ 2022年12月25日 05:56/ 0 赞/ 274 阅读

相关全局监听路由堆栈变化

![20200917071601155.png][] > 老孟导读：很多时候我们需要监听路由堆栈的变化，这样可以自定义路由堆栈、方便分析异常日志等。监听路由堆栈的变化使用

快来打我*/ 2022年12月08日 01:43/ 0 赞/ 240 阅读

相关 Vue--路由变化

原文网址：[Vue--路由变化\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址简介 vue路由变化时不会向后端发起请求。 v

ゝ一世哀愁。/ 2022年08月31日 12:27/ 0 赞/ 224 阅读

相关 vue页面监听路由变化

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

ゝ一世哀愁。/ 2022年08月30日 15:49/ 0 赞/ 315 阅读

相关 VUE监听路由变化的几种方式

VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？当然是利用VUE中的watch，请看代码。一、监听路由从哪儿来到哪儿去 w

红太狼/ 2022年05月14日 08:20/ 0 赞/ 367 阅读

相关 vue监听路由变化及路由跳转锚点

watch: { // 监听路由变化 $route(to,from){ console.log

阳光穿透心脏的1/2处/ 2021年09月23日 12:16/ 0 赞/ 710 阅读

相关 vue 监听路由

1、在App.vue文件中 watch:{ $route(data) { xx } }

桃扇骨/ 2021年07月24日 12:13/ 0 赞/ 430 阅读