0

I have a vuetify (vue 3) app. When I (hard) refresh my web app, I'd like to be redirected to my very first route (for isntance, Skills). Instead I go to the last route I was on.

Here are my routes.

const routes = [
  { 
    path: '/', 
    name: "Skills",
    component: Skills,
    beforeEnter: checkIfAuthenticated,
  },
  { 
    path: '/myskills', 
    name: "MySkills",
    component: MySkills,
    beforeEnter: checkIfAuthenticated,
  },
  { 
    path: '/history', 
    name: "History",
    component: History,
    beforeEnter: checkIfAuthenticated,
  },
  { 
    path: '/conversations', 
    name: "Conversations",
    component: Conversations,
    beforeEnter: checkIfAuthenticated,
  },
  {
    path: '/:catchAll(.*)*',
    name: "PageNotFound",
    component: PageNotFound,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

Thanks

jennie788
  • 396
  • 3
  • 18
  • 1
    It's not possible. Given a URL, a browser is going to load that URL. Unless you have a permanent redirect, nothing can be done to tell it to "actually, load this other page instead" – yoduh Jan 16 '23 at 06:24
  • By the way, you can redirect on refresh & hard refresh. But you can't only do it with a hard refresh. Because you can't simply detect only hard refresh [link](https://stackoverflow.com/questions/54040182/detect-a-hard-reload-with-javascript). If you need and for both refresh and hard refresh I can answer. – nur_riyad Jan 16 '23 at 06:31
  • Thanks nur_riyad, I don't care about the type of refresh. Where would you detect page reload in vuejs (I'm new to it)? Thanks – jennie788 Jan 16 '23 at 06:35
  • 2
    According to MDN you can use https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type as demonstrated in https://stackoverflow.com/a/54244573/5962802 – IVO GELOV Jan 16 '23 at 07:54
  • Thanks IVO. I was wondering if there was a Vue specific way of doing it. But I'll try to figure it out. Thanks! – jennie788 Jan 16 '23 at 08:11

0 Answers0