vue中共用一个页面只是路由参数的变化的单页面重新渲染

遇到问题的需求是：一个列表有好多层，但是列表都长得一样只是对应的不同的层级，所以共用了一个单页面，只是路由上的params的ID在进行变化

问题是：路由变化了，但是页面并没有重新渲染。

刚开始想到的解决方法是在标签上加 :key="Math.random()",但是没有什么效果，跟同事商量了半天也解不了惑，这个属性只在elementUI的table表格上使用过。

第二种，记得vue-router中<router-view></router-view>这个标签上可以添加key属性，即

<router-view :key="$route.fullPath"></router-view>

$route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径

只要url进行变化就会重新渲染，但是基于这个页面是后来新增加的，添加全局的这个属性会有所影响，所以抛弃了这一种方法

第三种，在vue-router的官网上看到了数据获取---导航完成后获取数据，通过watch进行监听$route

具体代码实现：

watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },  methods: {
    //fetchData 可以接受两个参数newVal, oldVal
    fetchData (newVal, oldVal) {      //进行获取数据的操作
    }
  }

router.vuejs.org/zh/guide/ad…

第一次写文章，记录自己日常的bug，望大家多多包涵，多多提提意见