需求
新建和编辑都在同一个页面,当新建完成之后,弹出提示并刷新页面,获取后台的数据并在页面回显,当再次点击保存时,向后台多传一个参数ID。
解决方式
方式一、最简单的方式
无论是标签方式的跳转还是js方式的跳转都可以
加一个参数时间戳,同时监听路由变化,重新调用所有方法
query:{ time: new Date().getTime() }
watch:{
$route(to,from){
this.reload()
}
},
方式二
重新加载页面,会有短暂的空白,用户体验不好
window.location.reload()
this.$router.go(0)
方式三
新建一个空白文件,先跳转空白页,再跳转回来。地址栏会有短暂的切换,但没什么影响。
需要刷新的页面
this.$router.replace({
path: '/white'
});
空白页面
export default {
name: "white",
data () {
this.$router.replace({
path: '/index'
})
return {}
}
}
方式四
重新渲染<router-view></router-view>
provide:全局注册方法;
inject:子组件引用 provide 注册的方法;
App.vue
<template>
<div id="app">
<router-view v-if="isReload"></router-view>
</div>
</template>
<script>
export default {
name: "App",
provide () {
return {
reload: this.reload
}
},
data () {
return {
isReload: true
}
},
methods: {
reload () {
this.isReload = false
this.$nextTick(() => {
this.isReload = true
})
}
}
}
</script>
需要刷新的页面
inject: ['reload'],
data () {
return {
}
},
methods: {
refresh () {
this.reload()
}
},