vue 中 router-view 路由跳转到同一个页面,页面刷新解决记录
写在前:当前环境,在父级页面点击方法跳转路由,路由携带参数到同一个页面,本例使用name/params(post)方式传参,页面不刷新解决方式记录。1.修改传参方式为get,当路由地址发生改变的时候,重新刷新页面。(绑定以下key)<router-view :key="$route.fullPath"></router-view>当前传参环境:router.js页面案例:{
·
写在前:当前环境,在父级页面点击方法跳转路由,路由携带参数到同一个页面,本例使用name/params(post)方式传参,页面不刷新解决方式记录。
1.修改传参方式为get,当路由地址发生改变的时候,重新刷新页面。(绑定以下key)
<router-view :key="$route.fullPath"></router-view>
当前传参环境:
router.js页面案例:
{
path: 'rotation',
component: Rotation,
name: 'rotation'
},
父页面点击方法跳转路由传参:
this.$router.push({
path: 'rotation',
query: {
itemsting: this.optionsting
}
});
2. 在子页面监听,父页面get方式传参同上:
created() {
let itemsting = this.$route.query.itemsting;
console.log('传值', itemsting);
if (!itemsting) {
this.$router.push({
path: '/home/ceshi'
});
}
this.onGetmessage(itemsting);
},
watch: {
$route(to, from) {
let itemsting = this.$route.query.itemsting; // 接收子页面传值 路径更新触发
if (!itemsting) {
this.$router.push({
path: '/home/ceshi'
});
}
this.onGetmessage(itemsting);
}
},
注:出现错误请友情告知,感谢。
更多推荐
已为社区贡献4条内容
所有评论(0)