Vue 代码 AST 转换升级实战 —— vue-router 篇

前言

最近我们发布了《阿里妈妈又做了新工具，帮你把 Vue2 代码改成 Vue3 的》这个 Vue2 升级工具，下面跟大家分享下我们如何利用GoGoCode对 VueRouter 进行代码升级的。

Vue Router是什么

贴一个官方介绍：
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

作为 Vue 开发的标配之一 ，Vue Router 跟随 Vue3 同步升级，API 定义与使用上有了一些破坏性的变化。为了实现一键 Vue2 升级 Vue3，我们把 Vue Router 的转换规则进行了拆解与研究，下面举几个使用 GoGoCode 的转换场景跟大家分享下：

利用 GoGoCode 升级 Vue Router

GoGoCode的使用可以参考这里

1. new Router 变成 createRouter

1.1 API的变化

Vue Router 不再是一个类，而是一组函数。现在你不用再写 new Router()，而是要调用
createRouter:

// 以前是
// import Router from 'vue-router'
import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

1.2 使用 GoGoCode 转换

处理上面API的变化，我们只需要利用 GoGoCode 的replace方法，两行代码搞定

// import 方式转换
ast.replace(`import $_$ from 'vue-router'`, 
            `import * as VueRouter from 'vue-router'`);

// 创建Router实例方法转换
ast.replace(`new Router($_$)`, `VueRouter.createRouter($_$)`);

我也来试试：地址

2. 新的 history 配置取代 mode

2.1 API 的变化

mode: 'history' 配置已经被一个更灵活的 history 配置所取代。根据你使用的模式，你必须用适当的函数替换它：

• "history": createWebHistory()
• "hash": createWebHashHistory()

• "abstract": createMemoryHistory()

  import { createRouter, createWebHistory } from 'vue-router'
  // 还有 createWebHashHistory 和 createMemoryHistory
  
  createRouter({
  history: createWebHistory(),
  routes: [],
  })

  2.2 使用 GoGoCode 转换

  VueRouter 中的 mode 配置，可以通过 GoGoCode 的replace方法，替换成history配置，如果没有mode配置，则使用默认配置：history:createWebHashHistory

  
  if (ast.has(`{mode:$_$}`)) {
  // router定义中存在 mode 属性，replace替换
    ast.replace(`mode:'history'`, 
              `history: VueRouter.createWebHistory()`);
    ast.replace(`mode:'hash'`, 
              `history: VueRouter.createWebHashHistory()`);
    ast.replace(`mode:'abstract'`, 
              `history: VueRouter.createMemoryHistory()`);
  } else {
  // router定义中不存在 mode 属性，默认采用 createWebHashHistory
    ast.replace(`{routes:$_$,$$$}`, 
              `{history: VueRouter.createWebHashHistory(),routes:$_$,$$$}`);
  }

  我也来试试：地址

  3. 移动了 base 配置

  3.1 API的变化

  base​配置被作为 createWebHistory (其他 history 也一样)的第一个参数传递：

  import { createRouter, createWebHistory } from 'vue-router'
  createRouter({
  history: createWebHistory('/base-directory/'),
  routes: [],
  })

  3.2 使用 GoGoCode 转换

  通过GoGoCode通配符号： $_$和$$$,将base及其它代码进行乾坤大挪移，可以瞬间完成代码片段转移。

  ast.replace(`{$$$,history: VueRouter.createWebHistory(), base: $_$}`,
    `{$$$,history: VueRouter.createWebHistory($_$)}`)

  我也来试试：地址

  4. \<router-view>、\<keep-alive> 和 \<transition>

  4.1 API 的变化

  transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用：

  <router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
  </router-view>

  4.2 使用 GoGoCode 转换

  GoGoCode同样能处理html代码，我们将router-view节点转移到transition外层，同时保持原来的属性及内部元素结构不变，使用replace 可瞬间完成。

  ast.replace(`<transition $$$1><router-view $$$2>$$$3</router-view></transition>`,
  `<router-view v-slot="{ Component }" $$$2>
    <transition $$$1>
        <component :is="Component" >$$$3</component>
    </transition>
  </router-view>`);

  我也来试试：地址

  最后

  这里只是列举了四个比较典型的VueRouter使用场景上的变化，包含了js和html代码转换。其他转换规则可以看下我们的 GitHub。这些转换规则都是使用了 GoGoCode 之后极大地简化了操作AST对象成本，基本上一个replace方法就能搞定，遇到代码转换需求非常推荐大家使用 GoGoCode！
  ​

如果在使用 GoGoCode 过程中遇到问题可以联系我们：
github: https://github.com/thx/gogocode/issues
钉钉群：34266233

感谢您的阅读，祝您有美好的一天！