实现效果从index/app 跳转到 index/search?text='123',在search组件中获取app传的text值,然后渲染到输入框中。
开始使用:
created() {
this.searchText= this.$route.query.text;
},
成功获取到值,以为结束了……
返回到index/app的时候,再次跳转回search组件发现text没有更新
问题:组件创建成功以后没有销毁,所以created执行了一次
解决问题:查看api使用beforeRouteUpdate,以为解决问题但是并没有
原因:
beforeRouteUpdate(to, from, next) {
//在当前路由改变,但是该组件被复用时调用
// 对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,(活该掉坑里)
// 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
//在当前路由改变,但是该组件被复用时调用
// 对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,(活该掉坑里)
// 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
另一种方法:
// 监听路由发生变化时执行
watch: {
'$route'(to, from) {
this.searchText= this.$route.query.text;
}
},