vue路由钩子函数beforeRouteUpdate

前言
当跳转跳转同一个路由地址时，此时这个组件会被复用。在这种情况下，传递过来的参数不会发生变化，因为组件复用了不会再重新创建，遇到这种问题的同学不要慌解决办法斜体样式还是有的！
问题
当前我有一个home.vue和一个A.vue组件

此时我点击了跳转A，传递的参数是1111，当我点击跳转A2传递的是222但是页面显示的还是1111home

看的了吧参数传递过来了但是页面并没有刷新，此时就是因为vue复用了同一个组件，生命
周期之创建了一次。
解决办法
第一种：使用beforeRouteUpdate钩子函数，vue官方解释的也很清楚，当一个组件复用时，传递的参数
发生变化就会触发这个钩子函数

 beforeRouteUpdate(to,form,next){
      this.id = to.query.id
          next()
    }

第二种：通过监听路由的变化

 watch:{
      $route(to){
         this.id = to.query.id
      }

第三种：通过计算属性

 computed: {
         comPath(){
           return this.id = this.$route.query.id
         }