在我的项目中,会有多个路由共用一个页面组件,比方新增 & 编辑页面,根本一样,只是数据结构不同而已,这时新建路由和编辑路由,就能够应用同一个页面组件
但,存在一个问题,就是切换路由时,路由变动了,不会从新触发页面组件的钩子函数(只在第一次加载时调钩子函数)。这个问题是页面钩子生命周期相干,为了解决能从新获取数据,从新加载页面。
总结了以下解决方案
办法一:给 router-view 里增加 key 惟一管制
// 在父组件加载路由的中央,减少 key
<router-view :key="$route.fullPath"></router-view>
办法二:通过监听 $route 路由的办法
// 在共用的页面组件中减少路由监听事件
watch:{'$route': function(to, from){if(to==="/create"){// 解决该路由下的数据}
else if(to==="/update"){// 解决该路由下的数据}
},
},
办法三:通过减少一个两头页面 empty.vue 解决跳转
methods: {init(){
// update 和 create 路由都指向同一个组件
let id = this.$route.query.id
if(id){
// 编辑
this.$router.replace({path:"/update", query:{id, id}})
}
else{
// 新增
this.$router.replace({path:"/create"})
}
},
}