问题:
在vue中使用 this.$router.push() 方法,如果只是传入的参数不同,会出现 url
地址变化了,但是页面没有重新请求数据,生命周期函数未调用,需要刷新一下页面才有新的数据加载。
原因:
由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2
这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加
beforeRouteUpdate 钩子来执行相关方法拉去数据
解决方法:
1. beforeRouteUpdate 钩子函数
beforeRouteUpdate(){
//执行获取数据接口
}
2. 给router-view 绑定相应的key值
设置 router-view 的 key 属性值为 $route.path,或则为 $route.fullpath
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.fullPath
}
}
}
</script>
$route.path
- 从 /page/1 => /page/2, 由于这两个路由的 $route.path 并不一样, 所以组件被强制不复
- 从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.path 一样, 所以和没设置 key 属性一样,
会复用组件
$route.fullPath
- 从 /page/1 => /page/2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用
- 从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用
3. 监听路由的变化
在页面的 watch 中,监听 $router 的变化
watch: { $route (to, from) { } }
会调用两次不推荐