Vue-cli3.0 监听路由变化的几种方式

在 vue 页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？下面将介绍这几种方式：

# 监听路由从哪儿来到哪儿去

<script>
export default {
  watch:{
      $route(to,from){
        console.log(from.path);//从哪来
        console.log(to.path);//到哪去
      }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10

# 监听路由变化获取新老路由信息

<script>
export default {
  watch:{
    $route:{
      handler(val,oldval){
        console.log(val);//新路由信息
        console.log(oldval);//老路由信息
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 监听路由变化触发方法

<script>
export default {
  methods:{
    getPath(){ }
  },
  watch:{
    '$route':'getPath'
  }
}
</script>

1
2
3
4
5
6
7
8
9
10

# 全局监听路由

在 mian.js中加入下面代码，然后进行判断

import router from './router';
router.beforeEach((to, from, next) => {
  console.log(to);
  next();
});

1
2
3
4
5

#Vue

上次更新: 2024/01/30, 00:35:17

← vue-cli3.0 开启 Gzip 压缩方法 Vue-cli3.0 结合 axios 解决生产环境中的跨域问题→