vue-router升级后遇到的问题

前言

最近公司需要把项目从vue2升级到vue3,路由也从vue-router从3升级到4版本,这种跨版本升级,很多写法都变了,api很多也不一定兼容,所以项目的功能都要重新测一遍,有问题的就要修改。

正文

路由模式

之前vue router的路由模式是下面这种写法:

js 复制代码
import Router from 'vue-router'
new Router({
  mode: 'hash', // history,abstract等
  base: process.env.BASE_URL,  // 取自于`vue.config.js` 中的 `publicPath`字段,等同
  routes
})

通过mode字段定义路由模式,然后base字段是基准路径。

而新的vue router4则更改了写法,提供一个history字段,值有以下:

  • createWebHashHistory(base)
  • createWebHistory(base)
  • createMemoryHistory(base)

分别对应之前的hash,history,abstract模式。

然后base字段也去掉了,改成直接通过传参来代替。

js 复制代码
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

同时,不再采用new Router实例化,而是采用createRouter调用函数,同时还暴露出createWebHashHistory,createWebHistory等函数。

mixins的router钩子函数

以前我们的组件会在mixins里面调用router的钩子函数,比如beforeRouteUpdate钩子函数,它会在路由改变,组件复用的时候调用。

在项目中,我们会在这个beforeRouteUpdate钩子函数里更新最新的参数。

但是我们在新的vue-router4里面,发现无论参数怎么变,请求还是之前的参数,导致数据还是老数据。

排查一番,才发现是mixins的钩子函数并没有执行,导致参数不能及时更新,导致请求还是老数据。

按理说这个逻辑应该跟之前的router版本一致才对,不应该出现这样的问题。

去github一搜索,发现这个问题一直存在,到现在还没有解决。

github的issue如下:

官方的回应:

同时我们在vue-router的文档中也可以看到,在从vue2中迁移

解决方案

第一种:

我们可以在组件定义一个router钩子函数,然后里面是执行mixins对应的钩子函数,并把参数传过去,mixins那边的逻辑不用改。这样改动相对较小。

示例代码:

js 复制代码
  import mixinsjs from '@/mixins/mixinsjs'
  export default {
    mixins: [minxinjs],
    beforeRouteUpdate (to, from, next) {
        minxinjs.beforeRouteUpdate.apply(this, [to, from, next])
    }
  }

第二种:

如果你的mixins只有这些钩子函数的逻辑,而且组件上没有这些钩子,可以采用解构的方法。

js 复制代码
 import mixinsjs from '@/mixins/mixinsjs'
 export default {
    ...minxinjs, // 解构
    // rest component logic 
 }

注意: 解构的方式,组件的data和methods会覆盖掉minxins的data,和methods,请注意解构的mixins中只有钩子函数的逻辑。

第三种:

可以在mixins中,定义一个created函数 ,利用this.$route的钩子守卫函数,把mixins中的router钩子逻辑写在对应的位置。

js 复制代码
const mixinsjs =  {
  created () {
    const route = this.$route.matched[0]
    if (!route) return
    route.leaveGuards = [function (to, from, next) {
      // beforeRouteLeave 的逻辑写在这里
      next()
    }]
    route.beforeEnter = [function (to, from, next) {
      // beforeRouteEnter 的逻辑写在这里
      next()
    }]
    route.updateGuards = [function (to, from, next) {
      // beforeRouteUpdate 的逻辑写在这里
      next()
    }]
  }
}
export default mixinsjs

总结

以上就是我升级vue-router后遇到的问题,vue-router这种跨大版本的升级,肯定会存在很多兼容问题,大家先评估改动的成本,再决定是否升级。

相关推荐
新中地GIS开发老师12 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang20 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。20 分钟前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。20 分钟前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡20 分钟前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_25 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含28 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友37 分钟前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手44 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰1 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm