[英]VueJS hook mounted() is not called when page is re-open by vue-router
Please, look the flux below, it's shows my problem.请看下面的通量,它显示了我的问题。 I'm using vue-router with
this.$router.push
to browsing on pages.我正在使用带有
this.$router.push
的 vue-router 来浏览页面。 I'm starting on PageA.我从 PageA 开始。
PageA -> PageB ( mounted()
of PageB is called) PageA -> PageB(调用 PageB 的
mounted()
)
PageB -> PageA (returning to PageA) PageB -> PageA(回到PageA)
PageA -> PageB ( mounted()
of PageB is not called) PageA -> PageB(不调用 PageB 的
mounted()
)
It sounds that page (.vue component) is not closed and mainted on cache or other thing.听起来页面(.vue 组件)没有关闭并保存在缓存或其他东西上。 I must use the
mounted()
method every time that page is open and maybe close the page and clean from cache.每次打开该页面时,我都必须使用
mounted()
方法,并且可能关闭该页面并从缓存中清除。 How I can solve it?我该如何解决?
vue
will re-use components were possible, this is expected. vue
将重用组件成为可能,这是意料之中的。
Normally you would watch for route changes and update your component state accordingly.通常你会观察路由变化并相应地更新你的组件状态。
To react to route changes you can use beforeRouteUpdate()
:要对路由更改做出反应,您可以使用
beforeRouteUpdate()
:
const Example = Vue.extend({ template: ` <div> <p>This changes: '{{param}}'</p> </div>`, data(){ return { param: this.$route.params.param }; }, beforeRouteUpdate(to, from, next) { this.param = to.params.param; next(); } }); const router = new VueRouter({ routes: [ { path: '/:param', component: Example, } ] }) const app = new Vue({ router }).$mount('#app')
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <router-link to="/foo">foo</router-link><br> <router-link to="/bar">bar</router-link><br> <router-view></router-view> </div>
Alternatively you can also watch the route and update the state accordingly:或者,您也可以查看路线并相应地更新状态:
Vue.extend({
watch: {
'$route'() {
// TODO: react to navigation event.
// params cotains the current route parameters
console.log(this.$route.params);
}
},
// ....
});
The vue-router
documentation has a few great examples for this: Data Fetching - Vue Router vue-router
文档为此提供了一些很好的示例: Data Fetching - Vue Router
If you still want to use mounted()
, you can do so by giving your router-view
a key that will change when the route changes, eg:如果你仍然想使用
mounted()
,你可以通过给你的router-view
一个当路由改变时会改变的键来实现,例如:
<router-view :key="$route.fullPath"></router-view>
This will force the component to be re-created every time, so it does have a performance penalty - i would recommend using the route hooks described above, if possible.这将强制每次都重新创建组件,因此它确实会降低性能 - 如果可能,我建议使用上述路由挂钩。
For those that ended up here like me looking at why I'm not getting unmounted called on a component inside a page, when route changes, here's some guidance:对于那些像我一样最终在这里查看为什么我没有在页面内的组件上卸载调用的人,当路由更改时,这里有一些指导:
Let's say you have Page A that uses Component A in it, and Page B that does not use Component A .假设您有一个使用组件 A 的页面 A和不使用组件 A 的页面 B 。
When you open Page A for the first time, Component A will have, as expected, mounted method called.当您第一次打开页面 A时,组件 A将按预期调用mount方法。
However, when you navigate to Page B , Vue3 won't un-mount or destroy Component A , rather it will deactivate it, and deactivated method will be called instead ofunmounted .但是,当您导航到Page B 时,Vue3 不会卸载或销毁Component A ,而是将其停用,并且将调用deactivated方法而不是unmounted 。
Once you navigate back to Page A , Component A will be reactivated and methodactivated will be called instead of mounted .一旦您导航回到页A,成分A将被重新激活和方法激活将被调用,而不是安装。
For those who are using the Composition API for Vue 3 :对于那些使用Vue 3组合 API的人:
This use case is for fetching data from an API upon component mount and other dependencies.此用例用于在组件安装和其他依赖项时从 API 获取数据。 Instead of
watch
, you need to use watchEffect
to automatically track the dependencies and perform side effects on mount.您需要使用
watchEffect
来自动跟踪依赖项并在挂载时执行副作用,而不是watch
。
watchEffect(fetchData);
watch(dependencies, callback)
will trigger on first visit to the route. watch(dependencies, callback)
将在第一次访问路由时触发。 But if you go to another page, then come back to it, it won't trigger again because it does not count the initial state as an update.但是如果你 go 到另一个页面,然后返回它,它不会再次触发,因为它不把最初的 state 算作更新。 Also, the dependencies technically did not change from the time it was mounted.
此外,从技术上讲,依赖项从安装时起就没有改变。
Additional Notes:附加条款:
If you are coming from React, watch
is not exactly equivalent to useEffect
.如果你来自 React,
watch
并不完全等同于useEffect
。 watchEffect
is more similar to it. watchEffect
与它更相似。
For comparison, this code should have the same results as the watchEffect
one.为了进行比较,此代码应与
watchEffect
代码具有相同的结果。 But watchEffect
is more concise.但
watchEffect
更简洁。
onMounted(fetchData);
watch([dependency 1, dependency 2, ...], fetchData);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.