Is there anyway to ignore the *failure: Avoided redundant navigation to current location* error using Vue Router and just refresh the page?

Question

I see this question has been asked a few times on here, but none of the answers have really helped me in this current situation.

I have an app I'm working on with a sidebar with tabs that link to different dashboards. Each of the SidebarLinks are a router-link with the to key being fed the route prop from the main component.

Inside one of these dashboards, the Analysis dashboard, there is another router that routes you to child routes for specific Analyses with their own ids (EX: /analysis/1).

The user clicks on a button for a specific analysis and they are routed to a page containing that information, on the same page.

The Error When I click the Analysis SidebarLink the route in the url changes back to /analysis, but the page doesn't update/refresh.

I don't get an error in the console, but I do get the failure in the devtools.

I understand that Vue Router doesn't route back to a route you are already on, but I need it to. If you refresh the page when the url is just /analysis it routes back to it's inital state.

Is there anyway to refresh when it rereoutes to /analysis? Or a way to handle this error to work as intended?

What I've tried

• I've tried changing the router-link to an <a> tag and programatically use router.push and then catch the error, but that doesn't do anything.

• I've tried checking if the route.fullPath.contains("/analysis") and then just do router.back() but that doesn't seem to work either. SidebarLink router function

function goToRoute() {
      console.log(`route.fullPath → `, route.fullPath)
      if (route.fullPath.match('/analysis*') as any) {
        console.log('route includes /analysis')
        router.back()
      } else {
        console.log('route doesnt inclue /analysis')
        router
          .push({
            path: props.route,
          })
          .catch(() => {})
      }
    }

Inital /analysis Page This is what the page looks like normally

/analysis/1 Page This is what the route to analysis/1 looks like (url changes)

/analysis/1 Page When Issue Analysis SidebarLink Clicked This is what the route to analysis looks like when the sidebarlink is clicked (url changes, but the page stays the same)

Answer 1

I suspect you are fetching your data from a backend service or data files If yes you can refetch the data everytime the route param changed by watching it.

watch: {
    '$route.params.id': function (id) {
    if(id)
     this.$store.dispatch('fetchOneAnalys', id)
else 
 this.$store.dispatch('fetchAllAnalyses')
    }