Vue 3+Vuetify应用硬刷新后如何重定向至初始路由？

你可以通过Vue Router的全局前置守卫beforeEach实现硬刷新后自动跳转至Skills路由，具体修改如下：

在你的路由配置末尾，添加全局路由守卫：

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,
})

// 添加全局前置守卫处理硬刷新重定向
router.beforeEach((to, from) => {
  // 硬刷新时from.name为null，此时若目标路由不是Skills则重定向
  if (from.name === null && to.name !== 'Skills') {
    return { name: 'Skills' }
  }
})

逻辑说明 #

• 硬刷新页面时，路由导航的from.name会返回null（无前置路由记录），以此作为硬刷新的判断依据
• 若此时即将进入的路由不是Skills，则直接重定向到Skills路由
• 原有的beforeEnter: checkIfAuthenticated权限验证逻辑会在重定向后正常触发，不影响权限校验

如果需要调整重定向的目标路由，只需修改return { name: 'Skills' }中的路由名称即可。

内容的提问来源于stack exchange，提问作者jennie788