路由地址变化了: http://localhost:8080/#/category/1013001
http://localhost:8080/#/category/1013321
但内容并没有更新,因为这两个地址匹配的都是同一个组件,这个组件在路由切换的过程中,组件并没有重新销毁(重新生成)
解决方案:
1)给router-view
路由出口处添加key属性
<router-view :key="$route.fullPath"/>
// key:平时是在 V-for 中使用
// key:这里作用是判断虚拟dom(组件)是否要销毁重建
// :key="$route.fullPath" 这种方式就好比是V-if
Vue 的工作原理: 数据的变化就会导致视图的变化
- render函数(数据1) === 虚拟dom1
- render函数(数据2) === 虚拟dom2
Vue会比较 虚拟dom1 与 虚拟dom2的区别(diff算法),然后决定是否要更新页面(更新哪些部分)
key在diff算法工作时,用来比对 虚拟dom1 虚拟dom2是否相同,
- 如果key相同,可能不需要
- 如果key不同,就一定h会更新
2)使用watch监听id变化重新拉取接口
监听 route.params.id的变化
watch(对象 | 数组 | 函数, (newVal, oldVal) => {}, { immediate: true | false, deep: true | false })
- immediate:是否立即执行
- deep:深度监听
watch(()=>route.params.id,(newVal)=>{
//在watch里面重发请求
},{immediate:true})
3)使用onBeforeRouteUpdate
钩子函数
<script>
import { onMounted, ref } from 'vue'
import { findTopCategory } from '@/api/category.js'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
export default {
setup () {
// 分类数据
const route = useRoute()
const cate = ref({})
const loadData = (id) => {
findTopCategory(id).then(data => {
console.log('findTopCategory', data)
cate.value = data.result
})
}
// 只执行一次
onMounted(() => {
loadData(route.params.id)
})
// 路由变化时执行
// to: 要跳转的路由对象
onBeforeRouteUpdate((to) => {
console.log('onBeforeRouteUpdate...............', to)
loadData(to.params.id)
})
return { sliders, cate }
}
}
</script>