因为router-view是复用的,单纯的改变id
号并不会刷新router-viewvue
因此咱们能够使用 watch 来监听路由的变化,而后先push一个空路由,再返回上一页,以下代码:api
watch:{ '$route': function (to, from) { let NewPage = '_empty' + '?time=' + new Date().getTime()/1000 //定义一个空页面 this.$router.push(NewPage) this.$router.go(-1) // 返回上一个页面 } },
还有另一种方法,是从知友那找到的:(https://www.zhihu.com/question/49863095/answer/289157209)ide
利用v-if控制router-view,在路由容器组件,如APP.vue中实现一个刷新方法this
一、用provide / inject来传递reload 在APP.vue里定义
spa
<template> <router-view v-if="isRouterAlive"/> //路由作判断 </template> <script> export default { provide () { //父组件传值 return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { //定义更新方法 this.isRouterAlive = false this.$nextTick(() => (this.isRouterAlive = true)) } } } </script>
在子组件中调用
inject: ['reload'], //子组件接受值 watch:{ '$route': function (to, from) { this.reload() // 监测到路由发生变化时调用 } },