マルチルーティングプロジェクト開発のデメリット
複数の人がVueプロジェクトを開発する場合、異なる人が異なるルートを開発することがあります。たとえば、Xiao Ming はxiaomingという名前のルートを定義します。
Zhang San はzhangsanという名前のルートを定義します
// src\router\index.ts
// 小明的模块
{
path: "/xiaoming",
name: "xiaoming",
component: xiaoming,
},
// 张三的模块
{
path: "/zhangsan",
name: "zhangsan",
component: zhangsan,
},
プロジェクトの baseUrl がtestに設定されているとすると、Xiaming は開発のたびにブラウザーにhttp://localhost:8080/ est/xiaoming と入力する必要があります。
Zhang San は、開発するたびにhttp://localhost:8080/ t est/zhangsan を入力する必要があり、これは非常に面倒です。次の図で直感的に体験できます。
上記の図から、vue のマルチプロジェクト開発は非常に面倒であることがわかります。
- まず、コンソールからホット アップデート リンクを見つけて、ブラウザにコピーする必要があります。
- 次に、プロジェクト構造をレイヤーごとにめくって、ルート名を見つけます
- コピーしたルート名をリンクの後ろに貼り付けます
Xiao Ming が遭遇した他の卵の痛みのシナリオを調べています。
Xiaomiing のプロジェクトにアクセスするには、いくつかのクエリ パラメーターが必要です。Xiaming は、プロジェクトにアクセスするたびに、これらの長いリンクを入力する必要があります。
http://localhost:8080/test/xiaoming?loginName=xiaoming&code=test&type=2
シャオミンは必死です。. . . . . . . . .
Vue マルチルーティング プロジェクト開発補助スクリプト
Xiao Ming の問題も長い間私を悩ませてきたので、この問題を解決するために特別にグリースモンキー スクリプトを開発しました。
まず、スクリプトの機能を見てみましょう。
スクリプトを開始すると、コンソールのホット アップデート リンクをブラウザにコピーするだけで済みます。スクリプトは、Xiao Ming がパスの後にルートを追加するのを自動的に支援し、Xiao Ming はプロジェクト構造を調べて確認する必要がなくなります。路線名を探せ！
さらに便利なのは、このプロジェクトでは、Xiao Ming がスクリプトのフローティング ウィンドウを使用して、Zhang San と彼自身のモジュールをすばやく自由に切り替えることができることです。
シャオミンが多くのクエリパラメータを入力した場合でも、スクリプトは自動的に記録でき、シャオミンの入力パスが不完全な場合、スクリプトはシャオミンがそれを完了するのを自動的に支援します。
シャオミンはとても便利でとても幸せです！Xiao Ming は、スクリプトがどのように機能するかについて興味があります。
脚本原理
スクリプトは理解しやすく、ブラウザー プラグイン (オイル モンキー) を介して動作するように現在の Web ページに挿入される js の一部です。
では、スクリプトはどのようにしてルーティング情報を取得するのでしょうか?
実際、vue によって開発されたプロジェクトの場合、各 dom のルート要素にこの情報が格納されます。Nuggets の公式 Web サイトを例に取りましょう (Vue が開発):
この例から、Nuggets 公式 Web サイトの Vue ルート要素 (id は __nuxt) の属性値に Vue の情報が含まれていることがわかります。
Nuggets 公式 Web サイトのルーティング情報は、次の方法で取得できます。
const vueApp = document.body.querySelector("#__nuxt")
let $router = vueApp?.__vue__?.$router?.options?.routes || []
これは、vue で開発された Web ページ上でスクリプトがスムーズに実行される原則でもあります。
スクリプトのダウンロード方法
タンパーモンキーをインストール
Tampermonkey は、カスタム スクリプトの実行に使用できるブラウザ アプリケーションです。
したがって、このスクリプトを使用するには、まずブラウザに tampermonkey (オイル モンキー プラグイン) をインストールする必要があります。
- オイル モンキー プラグインを egde ブラウザ アプリケーション ストアにインストールするのは非常に簡単です。
- Google Chrome でオイル モンキー プラグインをダウンロードするには、はしごを使用する必要があります。コメント欄にメッセージを残していただければ、プライベートメッセージでプラグインとインストールのチュートリアルをお送りします。
vue-router スクリプトを検索します
ブラウザの Greasyfork プラグインをインストールしたら、https://greasyfork.org/zh-CNでスクリプトを検索できます。
vue-routerキーワードを入力します
検索されたスクリプトをクリックしてインストールします。
スクリプトの設定と例外処理
スクリプト パネルは次のように設定されます。
設定パネルは次のとおりです。
経路探索パラメータ
ルート検索パラメーターを入力すると、ジャンプ時にすべてのルートにこのパラメーターが追加されます。
プロジェクトで loginName=xxx を設定する必要がある場合は、? 記号を付けずにこのパラメーターを入力してください。
この値も、ユーザー入力の結果として自動的に記録されます。
開発モードでのみ表示
デフォルトでは、このスクリプトは localhost のドメイン名でのみ機能します。他の vue 開発プロジェクトで実行したい場合は、このボタンを閉じてください。
たとえば、このオプションをオフにすると、このプラグインをNuggets公式 Web サイト、Meili Snow Mountain コンポーネント ライブラリなどで使用できます。
この機能ページは、スクリプト ボタンを介して実現できます。
ルーティングのスマート補完
プラグインがルートを自動的に完成させたくない場合は、この機能をオフにしてください。
更新ボタンをクリックします
設定スクリプトに付属する更新ボタンの追加作業。何もチェックされていない場合、更新ボタンは現在のページを再読み込みします。
スクリプトをリセット
スクリプトの例外によりページが繰り返し更新される場合、リセット ボタンを使用して、スクリプトのすべてのキャッシュ データをクリアできます。
