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. 、 和

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

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