记,一次路由配置错误,导致的浏览器前进,后退按钮路由跳转错误的问题

255 阅读1分钟

问题描述 路由模式:history 在VUE路由跳转后,使用浏览器自带的前进,后退按钮,每次按钮点击操作之后,路径都会呈现一个奇怪的跳转错误,如下:

1.访问路由 /a/b 2.访问路由 /a/c 3.浏览器后退按钮会将路由跳转至 /a/a/b,继续点击后退按钮会跳转至 /a/a/a/b 以此类推

前因: 项目框架需要一个可以根据配置变更项目部署路径的功能。 为了满足这个需求,在VUE的路由配置增加两个一个根据打包参数动态指定路由基础路径的配置参数

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL + '/xxxx/', //项目部署路径
  routes,
  scrollBehavior( to, from, savedPosition ){
    return {x:0,y:0}
  }
})

问题就出在了 base: process.env.BASE_URL + '/xxxx/' 这一行上 如果未指定导报参数则 process.env.BASE_URL 的取值是 "/", 也就是说上述配置的路由基础路径会被设置为 "//xxx/"

然后是Vue-Router的源码: 当程序进行路由跳转时,Vue-Router会将对应的信息记录到 window.history 中; Vue-router在进行上述记录之前会首先整理当前的路由地址,根据路由基础路径计算当前路由的实际路径,如: 路由基础路径为 "/a" 则 将 "/a/b/c" 的形式转换为 "/b/c",直接上源码<vue-router.js> image.png 当我们错误的将基础路径设置为 "//a"时,路径 "/a/b/c" 会被错误的转换为 "b/c",也就是说一个“绝对路径”被错误的转换成了一个“相对路径”, SO,报错了。