I am currently creating a Vue.js application with vue-router.
According to the documentation, within the hook beforeRouteUpdate, I have full access to the component using the keyword this:
The documentation mentions that beforeRouteEnter is the only guard that allows passing a callback to next. For beforeRouteUpdate and beforeRouteLeave, this functionality is already available, so passing a callback is not necessary and therefore not supported:
Thus, I implemented the following code snippet:
...
methods: {
...mapActions({
setFileDetails: 'setFileDetails',
setActionParams: 'setActionParams',
setSelectedFileId: 'setSelectedFileId',
}),
goToImportSource() {
this.$router.push('/import');
},
openAnnotationsView(item) {
this.$router.push(`/ingestion/queue/${item.id}`);
},
},
beforeRouteUpdate: (
to,
from,
next,
) => {
this.setSelectedFileId(to.params.id);
next();
},
};
</script>
However, upon implementing this code, I encountered the following error:
vue-router.esm.js?fe87:16 [vue-router] uncaught error during route navigation:
TypeError: _this.setSelectedFileId is not a function
at VueComponent.beforeRouteUpdate (PageIngestionQueue.vue?3869:67)
at boundRouteGuard (vue-router.esm.js?fe87:2080)
at iterator (vue-router.esm.js?fe87:1943)
at step (vue-router.esm.js?fe87:1717)
at step (vue-router.esm.js?fe87:1721)
at step (vue-router.esm.js?fe87:1721)
at step (vue-router.esm.js?fe87:1721)
at eval (vue-router.esm.js?fe87:1718)
at eval (vue-router.esm.js?fe87:1964)
at eval (routeRules.js?b464:9)
If I call this.setSelectedFileId elsewhere in the component, it functions correctly...what could be causing this issue?