监听路由变化而触发方法

3、监听路由变化而触发方法

3.1、基本逻辑：

• 监听路由变化而触发方法，最直观的做法就是通过watch侦听器去监听$route的变化，在{}中写上要执行的方法。

但是这 么做并不能应对所有情况产生的路由变化。

3.2 、路由变化的两种可能方式以及它们的不同：

• 方法1：通过在地址栏直接输入URL

  • 通过这种方法变化路由，整个页面会被重新渲染。 也就是说，会触发「生命周期的钩子函数」。
  • 由于重新渲染了页面，watch也会被重新渲染，所以虽然发生了路由改变，但是watch无法监听这次改变。

• 方法2：在页面中通过router相关方法或<router-link>标签

  • 该方法页面不会被重新渲染。即不会触发 「生命周期的钩子函数」
  • 父页面的watch侦听器可以监听到这种变化。

• 总结：watch方法监听路由变化，无法应对通过在地址栏直接输入URL导致的路由变化，而可以监听在该页面中子路由的变化；生命周期的钩子函数则正相反，无法监听该页面中子路由变化，只可以监听地址栏输入URL导致的路由变化。

3.3、例

  watch:{
    // 监听路由改变，该函数可以有参数to与from，代表即将去的页面与切换前的页面。
    $route (to,from) {
      console.log(to,from);
			this.test();
    }
  },
  created(){
    // 生命周期钩子函数
    this.test();
  }

3.4、其他

根据具体需要选择使用哪种，或者两种都用。