vue跳转到新页面后并执行本界面的回调函数
时间: 2023-08-05 21:47:39 浏览: 85
在 Vue.js 中,可以使用路由参数来实现页面跳转并传递数据,在跳转后的组件中可以通过 `props` 或 `watch` 来监听传递的数据并执行回调函数。
具体实现步骤如下:
1. 在跳转时通过路由参数传递回调函数。
```javascript
// 在当前组件中跳转到新页面并传递回调函数
this.$router.push({ path: '/new-page', query: { callback: this.callback } })
```
2. 在新页面的组件中获取传递的回调函数并绑定到组件实例的属性中。
```javascript
export default {
props: {
callback: {
type: Function,
required: true
}
},
mounted() {
// 在组件挂载后执行回调函数
this.callback()
}
}
```
3. 在新页面的组件中监听 `props` 的变化,当回调函数发生变化时执行回调函数。
```javascript
export default {
props: {
callback: {
type: Function,
required: true
}
},
mounted() {
// 在组件挂载后执行回调函数
this.callback()
},
watch: {
callback(newCallback) {
// 当回调函数发生变化时执行回调函数
newCallback()
}
}
}
```
在上面的示例代码中,我们通过路由参数传递了回调函数,并在新页面的组件中获取了该函数并绑定到组件实例的属性中。然后,在组件挂载后执行该回调函数。此外,我们还监听了 `props` 的变化,当回调函数发生变化时执行回调函数。
阅读全文