vue跳转界面触发了本界面的onMounted
时间: 2024-10-10 14:13:50 浏览: 33
在Vue.js中,当你从一个页面跳转到另一个页面并返回时,如果新页面上的组件使用了`mounted()`生命周期钩子函数,这个函数会在组件首次挂载时运行。当通过路由`this.$router.push()`或`this.$router.replace()`等方法进行导航时,由于组件会被卸载并在新的页面上创建新的实例,所以原来的`mounted`方法不会再次执行。
如果你希望在每次路由变化时都执行某些操作,你可以考虑使用`beforeRouteUpdate`或`beforeEach`这样的导航守卫(vue-router的导航生命周期钩子)。例如:
```javascript
// 在你的组件里
beforeRouteUpdate(to, from, next) {
// 这里你的函数会在这个路由更新之前被调用
console.log('页面正在更新');
// ...其他操作
next(); // 继续执行下一步
}
// 或者全局设置一个守卫
router.beforeEach((to, from, next) => {
// 在所有导航尝试中执行
console.log('路由即将改变');
// ...其他处理
next();
})
```
这样,每当路由发生变化时,无论是否回到当前页面,对应的生命周期钩子都会被执行。如果只是想在用户离开当前页面后再回来时执行特定操作,可以使用`activated`生命周期钩子,它仅在组件被重新激活时(比如从非同级组件导航回来)触发。
阅读全文