遇到问题的需求是:一个列表有好多层,但是列表都长得一样只是对应的不同的层级,所以共用了一个单页面,只是路由上的params的ID在进行变化
问题是:路由变化了,但是页面并没有重新渲染。
刚开始想到的解决方法是在标签上加 :key="Math.random()",但是没有什么效果,跟同事商量了半天也解不了惑,这个属性只在elementUI的table表格上使用过。
第二种,记得vue-router中这个标签上可以添加key属性,即
$route.fullPath完成解析后的 URL,包含查询参数和 hash 的完整路径
只要url进行变化就会重新渲染,但是基于这个页面是后来新增加的,添加全局的这个属性会有所影响,所以抛弃了这一种方法
第三种,在vue-router的官网上看到了数据获取---导航完成后获取数据,通过watch进行监听$route
具体代码实现:
watch: {
// 如果路由有变化,会再次执行该方法
'$route': 'fetchData'
}, methods: {
//fetchData 可以接受两个参数newVal, oldVal
fetchData (newVal, oldVal) { //进行获取数据的操作
}
}
复制代码
第一次写文章,记录自己日常的bug,望大家多多包涵,多多提提意见