【102】檢查Vue.js路由名稱是否重名

我自己寫的工具，開源地址：https://github.com/wersdxzfer/checkVueRouterNameRepeat

這是此工具的介紹。

依賴項

請先安裝java 8 或以上版本。這個工具的運行依賴於java。

場景

當我用 Vue.js開發前端項目的時候，會用vue-router來管理路由。我習慣用路由的名稱做跳轉，這樣也方便後期更改路徑。路由的配置寫在js文件中。如果項目規模較大，就把這些路由配置拆分到多個js文件中。

衆所周知，vue-router規定路由名稱必須唯一。

但是這樣會出現一個問題：多人開發，多個路由配置文件，很容易出現路由名稱重複的問題。

爲了解決這一問題，我寫了這個工具。

用法

找到config.xml文件。內容類似下面：

<?xml version="1.0" encoding="UTF-8"?>
<folders>
    <folder>D:\your\folder_a</folder>
    <folder>D:\your\folder_b</folder>
</folders>

folder標籤中的內容是路由文件所在的文件夾。你可以指定多個路由文件夾。改好後，通過命令行進入工具路徑下，執行如下命令：

java -jar checkVueRouterNameRepeat-0.0.1-SNAPSHOT.jar

如果沒有重複，會提示如下信息：

路由名稱沒有重複。

如果有重複，會提示如下信息：

D:\sdf\config.xml
重複的路由名稱是：  guideBookTeacher
D:\workspaceSet\vsc\front\src\routes\b\teacher.js

值得注意的是，本工具對 vue-router語法支持是有限的。建議使用者參考 vue-router的官方文檔寫成如下的形式：

{
  path: 'test/:testId',
  name: 'test',
  // 此處代碼省略。
}

請確保 name 在獨立的一行上。

對 /* ... */ 註釋支持有限。請確保 /*在一行的行首，*/ 在一行的行尾。寫成類似下面這種：

{
  path: 'test/:testId',
  name: 'test',
  /*
  這是註釋。
  */
  // 其他代碼省略。
}