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

感謝您的閱讀，祝您有美好的一天！