Handling a this.$router.replace(href); in vue 2

Question

I am new to vue and working on vue code those before me created. So there is a lot of legacy code that is just too complex to change right now.

The vue code can be in one of two states when a user wants to navigate to DynamicReport, they might be on that component or might not. The problem I am trying to solve is that when the user is on DynamicReport and the code does a push, it gets the NavigationDuplicated error. I have changed the code to do a replace, but that doesn't fire the mounted handler. So I am trying to figure out how to reinitialize the component when the user wants to navigate to the new report.

This is in the App.vue:

      viewReportNotification: function(report) {
        const { href } = this.$router.resolve({
          name: 'DynamicReportWithId',
          params: { reportResultsId: report.reportResultsId } // Route parameters
        });

        console.log(`this.$route.path: ${this.$route.path}`)
        console.log(`href: ${href}`)
        if (this.$route.path !== href) {
          if (this.$route.path.startsWith('/DynamicReport/')) {
            console.log(`trying to replace: ${href}`)
            this.$router.replace(href);
          } else {
            console.log(`trying to PUSH: ${href}`)
            this.$router.push(href);
          }
        }
      },

And I tried adding this to the component, but the beforeRouteUpdate isn't being called:

  beforeRouteUpdate: function(to, from, next) {
    console.log(`beforeRouteUpdate( ${to}, ${from}, ...)`);
    if (to.type === 'replace') {
      console.log(`replacing ${from} with ${to}`);
      this.loadReportIfQueryParamsExist();
    }
    next();
  },
  mounted: function() {
    this.loadReportIfQueryParamsExist();
    this.handlePanelOpen();
  },

Again, I am new to vue code, I am sure there is a lot better ways to do the whole thing, but... I am just trying to fix a bug, not redesign the whole thing right now.

Answer 1

I found a different approach... The mount calls another method, so now viewReportNotification() calls that other method and then calls replace to update the URL. Works like a charm. Thanks for the suggestions, I appreciate it!