监听路由的变化

weixin_46156770

于 2021-03-26 13:48:16 发布

阅读量311

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/115240546

版权

本文介绍了在Vue应用中如何监听路由参数的变化，包括组件内监听和全局监听，以及在路由变化时触发相应方法的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个问题，就是路由携带的参数变了，如何可以刷新页面，由此引出了可以监听路由的变化
1.组件内监听路由的方式：

 watch: {
  '$route.path': function (newVal, oldVal) {
   if (newVal === '/login') {
    console.log('欢迎进入登录页面');
   }
   if (newVal === '/register') {
    console.log('欢迎进入注册页面');
   }
  }
 }

watch:{
  '$route' (to,from) {
    console.log(to, from)
     // to , from 分别表示从哪跳转到哪，都是一个对象
     // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
    if (to.query.id !== from.query.id) {
		this.id = this.$route.query.id
		this.name = this.$route.query.name
	}
  }
},

// 监听新老路由变化信息
watch:{
    $route:{
      handler(newVal, oldval){
        console.log(newVal)
        console.log(oldval)
      },
      // 深度监听
      deep: true
    }
  }

2.监听路由变化执行相应的方法：

watch: {
      "$route": "getDetailData"

最低0.47元/天解锁文章