Vue 哈希模式路由跳转失败 (诡异问题!)

Vue 哈希模式路由跳转失败 (诡异问题!)

Vue 版本号： vue: 2.5.2 vue-router: 3.0.1；部分安卓机型以及苹果13 系统16.1.1；在页面首次跳转时会出现把哈希值置空导致页面跳转失败。只能重新刷新页面；页面路由哈希值重新恢复有值；这时就可以路由跳转；

img

img

在 Vue 中，默认的路由模式是 history，这意味着它会使用浏览器的 history 对象来维护路由历史记录。但是，可以将路由模式设置为 hash，这意味着它会使用 URL 的哈希值来维护路由历史记录。

这样做的一个好处是，当使用 hash 模式时，即使不支持 HTML5 History API，也可以使用 Vue 路由器。但是，这也意味着需要在服务器上执行一些额外的配置，以便在刷新页面时能够正常工作。

根据提供的信息，我猜测使用的是哈希模式，并且在某些机型上路由跳转失败。可以尝试在服务器上配置一些路由规则来解决这个问题。

可以使用如下代码来启用哈希模式：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

另外，还可以尝试使用 history 模式，但是需要在服务器上配置一些路由规则。可以使用如下代码启用 history 模式：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})