Vue 问题笔记 vue-router单页面应用跳转路由时触发事件

前端小黑

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2025-09-22 09:18:23 发布 1.7w 阅读 AI 写同款· GEO 优化 ›

【Vue3从零开始-实战】S14：详情页回退事件及路由参数的传递获取数据本篇文章主要讲解了路由中的回退事件和动态传参的方式，并在接口请求中获取到路由传递的参数。阅读详情

在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。

单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。

简单来说，有两个页面A和B，我们使用单页面的形式，使用vue-router来实现页面的“跳转”，当我们一开始打开A页面时，执行了页面的created和mounted，跳转到B页面，执行了B页面的created和mounted，但是，当我们从B页面“跳转”回A页面时，我们发现不会执行created和mounted了，因为这个Vue组件已经加载了，它不会重复执行方法，如果我们要在路由发生变化的时候执行方法，那我们就需要监听$route的变化，在它变化的时候执行方法。

在Vue的官方文档中，直接在监听后传入一个方法对应的字符串，在路由发生变化的时候自动执行方法

watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }

当然，如果我们要通过判断路由发生的特定变化来执行方法，可以使用handler

watch:{
  "$route":{
    handler(route){
      const that=this;
      if(route.name=='Hello'){
        that.fetchData();
      }
    }
  }
}

这样子就会针对路由的值来执行方法了。

收录于

JavaScript

vue

本内容遵循 CC 4.0 BY-SA 版权协议

【Vue3 生态】Vue Router 路由知识概览在 Web 前端开发中，路由是非常重要的一环，但是路由到底是什么呢？阅读详情

Vue 问题笔记 vue-router单页面应用跳转路由时触发事件

相关推荐