前言

最近我們發(fā)布了《阿里媽媽又做了新工具，幫你把 Vue2 代碼改成 Vue3 的》這個(gè) Vue2 升級(jí)工具，下面跟大家分享下我們?nèi)绾卫?a target="_blank">GoGoCode對(duì) VueRouter 進(jìn)行代碼升級(jí)的。

Vue Router是什么

貼一個(gè)官方介紹：
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌

作為 Vue 開發(fā)的標(biāo)配之一 ，Vue Router 跟隨 Vue3 同步升級(jí)，API 定義與使用上有了一些破壞性的變化。為了實(shí)現(xiàn)一鍵 Vue2 升級(jí) Vue3，我們把 Vue Router 的轉(zhuǎn)換規(guī)則進(jìn)行了拆解與研究，下面舉幾個(gè)使用 GoGoCode 的轉(zhuǎn)換場(chǎng)景跟大家分享下：

利用 GoGoCode 升級(jí) Vue Router

GoGoCode的使用可以參考這里

1. new Router 變成 createRouter

1.1 API的變化

Vue Router 不再是一個(gè)類，而是一組函數(shù)。現(xiàn)在你不用再寫 new Router()，而是要調(diào)用
createRouter:

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

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

1.2 使用 GoGoCode 轉(zhuǎn)換

處理上面API的變化，我們只需要利用 GoGoCode 的replace方法，兩行代碼搞定

// import 方式轉(zhuǎn)換
ast.replace(`import $_$ from 'vue-router'`, 
            `import * as VueRouter from 'vue-router'`);

// 創(chuàng)建Router實(shí)例方法轉(zhuǎn)換
ast.replace(`new Router($_$)`, `VueRouter.createRouter($_$)`);

我也來試試：地址

2. 新的 history 配置取代 mode

2.1 API 的變化

mode: 'history' 配置已經(jīng)被一個(gè)更靈活的 history 配置所取代。根據(jù)你使用的模式，你必須用適當(dāng)?shù)暮瘮?shù)替換它：

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

import { createRouter, createWebHistory } from 'vue-router'
// 還有 createWebHashHistory 和 createMemoryHistory

createRouter({
  history: createWebHistory(),
  routes: [],
})

2.2 使用 GoGoCode 轉(zhuǎn)換

VueRouter 中的 mode 配置，可以通過 GoGoCode 的replace方法，替換成history配置，如果沒有mode配置，則使用默認(rèn)配置：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 屬性，默認(rèn)采用 createWebHashHistory
    ast.replace(`{routes:$_$,$$$}`, 
              `{history: VueRouter.createWebHashHistory(),routes:$_$,$$$}`);
}

我也來試試：地址

3. 移動(dòng)了 base 配置

3.1 API的變化

base配置被作為 createWebHistory (其他 history 也一樣)的第一個(gè)參數(shù)傳遞：

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

3.2 使用 GoGoCode 轉(zhuǎn)換

通過GoGoCode通配符號(hào)： $_$和$$$,將base及其它代碼進(jìn)行乾坤大挪移，可以瞬間完成代碼片段轉(zhuǎn)移。

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

我也來試試：地址

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

4.1 API 的變化

transition 和 keep-alive 現(xiàn)在必須通過 v-slot API 在 RouterView 內(nèi)部使用：

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

4.2 使用 GoGoCode 轉(zhuǎn)換

GoGoCode同樣能處理html代碼，我們將router-view節(jié)點(diǎn)轉(zhuǎn)移到transition外層，同時(shí)保持原來的屬性及內(nèi)部元素結(jié)構(gòu)不變，使用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>`);

我也來試試：地址

最后

這里只是列舉了四個(gè)比較典型的VueRouter使用場(chǎng)景上的變化，包含了js和html代碼轉(zhuǎn)換。其他轉(zhuǎn)換規(guī)則可以看下我們的 GitHub。這些轉(zhuǎn)換規(guī)則都是使用了 GoGoCode 之后極大地簡(jiǎn)化了操作AST對(duì)象成本，基本上一個(gè)replace方法就能搞定，遇到代碼轉(zhuǎn)換需求非常推薦大家使用 GoGoCode！

如果在使用 GoGoCode 過程中遇到問題可以聯(lián)系我們：
github: https://github.com/thx/gogocode/issues
釘釘群：34266233

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