关于javascript:Vue-代码-AST-转换升级实战-vuerouter-篇

前言

最近咱们公布了《阿里妈妈又做了新工具，帮你把 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

感谢您的浏览，祝您有美妙的一天！