vue router路由参数变化，路由地址没变化 ，页面不重新渲染，刷新问题

路由参数变化，地址没变化 ，页面不重新渲染，刷新问题

原因：

该路由对应的组件在 路由地址没有改变，会复用该组件，不会再重新创建该组件实例，所以对应的写在生命周期钩子函数中的异步请求代码就不会执行，页面也不会重新渲染，

解决方法：

方法一：

给对应的router-view 动态添加key属性，这样就不会出现路由参数变化页面复用的情况，代码如下:

#router-view 代码
<router-view ：key="key">router-view>

#组件动态key属性 的值
computed: {
     
    key() {
     
      return this.$route.name !== undefined
        ? this.$route.name + new Date()
        : this.$route + new Date();
    }
  }

注意： 设置了key属性后，跟随 这个router-view 下的所有 视图，路由跳转 都会重新创建

方法二：

通过watch方法监听 $route
把异步请求代码放到methods中， 创建组件时,在钩子函数中调用一次封装好的数
监听 $route 变化 （深度监听）后再次调用 封装好的函数，
这样就达到了数据改变重新渲染该组件的目的

watch: {
     
    $route: {
     
  		handler(to, from) {
     
  			#调用第三部封装好的函数即可
  		},
  		deep:true
  	}
}

方法三：

在该组件中设置一个守卫，会怎么属性监听选项的话，这个就非常简单了，
首先重复方法三的一二步，
在组件中配置钩子函数

#
name'',
data(){
     return{
     }},
methods: {
     },
beforeRouteUpdate (to, from, next) {
     
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  #再次调用第三部封装好的函数即可
},

再次调用第三部封装好的函数即可