路由变化，数据无法更新？

问题：

今天写项目，出现了个奇怪的问题，两个相同的组件进行切换，由于只是后面的参数id一致，导致了右侧配置面板没有触发更改数据。

解释:

 依赖路由的函数执行写在created生命周期里面,因为相同路由二次甚至多 次加载的关系 
 没有达到监听，页面进行切换的时候并不会运行created组件生命周期，导致数据还是第一次进入的数据。 
 不同的路由vue会刷新并跳转到相应路由，
 但如果是下一个点击触发的还是当前路由则当前路由页面不会被刷新
 对于简单的数据更新，我们可以直接监听路由参数并重新获取路由的初始化数据即可，
 但是对于有很多子组件需要初始化或者reset的情况，我们还是有必要重新执行组件的生命周期。

针对这种情况可以使用三种方式解决

1、为相同路由页面跳转进行中间路由替换，在router上注册beforeEach全局守卫进行拦截，跳转到一个中间路由，再从中间过渡路由跳转至要去的路由。

2、使用v-if重新渲染当前页面组件

         <router-view v-if='showActive'></router-view>
          // script部分
          export default {
               data () {
                   return {
                       showActive: true
                   }
               },
               methods: {
                   reload () {
                       this.showActive= false
                       this.$nextTick(() =&gt; (this.showActive= true))
                   }   
               }

3、使用vue文档组件绑定的key值来进行强制刷新

   Vue文档说明了当你需要
  · 完整地触发组件的生命周期钩子
  · 触发过渡
    这个时候可以利用更新组件绑定的key值来完成，直接为组件绑定与路由参数关联的值即可
   <router-view v-show="isShowComSet":key="elementActive&&elementActive.id"></router-view>```

完结

       1、希望对看完此文章的你有用，有什么问题欢迎指正留言~
       2、觉得写的不错的小伙伴记得点赞+关注哦！0.0....