由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式
将整个页面封装成一个子组件 children => formTe,参数可以父级带下去,我这边是子页面在created时获取路由参数
<template>
<div>
<formTe v-if='showNum/2 === 0' :key='showNum'></formTe>
<formTe v-else :key='showNum'></formTe>
</div>
</template>
<script>
import formTe from './formTe'
export default {
data () {
return {
showNum: 2
}
},
components: {
formTe
},
watch: {
// 监听路由变化,当路由发生变化的时候,重新加载子组件,通过v-if来判断,记得加key值,这样vue就会重新渲染页面
$route (to, from) {
++this.showNum
}
}
}
</script>