vueプロジェクトの許可制限機能には、このような実装スキームがあります。
- プロジェクトに入る
- 許可要件なしでのみルートを設定する
- 現在のユーザーの権限をバックグラウンドで提供します
- ユーザーの権限に応じて、バックグラウンドはユーザーが使用できるルーティング情報を返します
- ルーティング情報を「ルートオプションの要件を満たす配列」に変換します
- router.addRoutes（routes）メソッドを使用して、「routesオプションの要件を満たす配列」をルートに追加します
このソリューションには2つの問題があります。
- ルーティングルールを追加する方法
- ルーティングルールを削除する方法
ルーティングルール
まず、ルーティングルールとは何ですか？
{パス： '/ foo'、コンポーネント：Foo}次の例ではルーティングルールです
var router = new VueRouter({
routes: [{
path: '/foo',
component: Foo
}, {
path: '/bar',
component: Bar
}]
})
ルーティングルールを配列にラップします。この配列は、以下のrouter.addRoutesメソッドに提供されるデータです。
ルーティングルールを追加する
ルールを追加する公式のメソッドはrouter.addRoutes（）です。
router.addRoutes（routes：Array）
は、ルーティングルールを動的に追加します。パラメータは、routesオプションの要件を満たす配列である必要があります。
var router = new VueRouter({
routes: [{
path: '/foo',
component: Foo
}]
});
router.addRoutes([{
path: '/bar',
component: Bar
}])
このように、バーがルーティングに追加されました。これは、シンプルで失礼で効率的であると言えます。
ルーティングルールを追加する場合は、詳細に注意を払う
addRoutesは最後に新しいルーティングルールを追加することができます。のために
あなたのルーティングルールが複雑であり、パスはいくつかの経路を一致させることができる場合など、あなたは慎重にあなたのルーティングを設計する必要が
あるためでルーティングルールの順序意味があります。優先度が高いほど、優先度が高くなり、マッチング結果に直接影響します。
ルーティングルールを削除する
魔法は、役人がルールを追加する方法だけを提供し、ルールを削除する方法を提供しないことです。
学習した後、私は同様の効果を持つ方法を見つけました。
var router = new VueRouter({
routes: [{
path: '/foo',
component: Foo
}]
});
router.addRoutes([{
path: '/bar',
component: Bar
}])
// 获取原始路由数据
var options = router.options
// 用原始数据重新 new 一个路由
var _VueRouter = new VueRouter(options)
// 用新路由的 matcher 替换旧路由的 matcher
router.matcher = _VueRouter.matcher
これは、ルートをリセットするのと同じです。
元のデータを取得した後、プロジェクトの要件に応じてオプションにルーティングルールを挿入し、新しいルートを更新することもできます。
削除方法の原理の簡単な分析
vueルーターのソースコードを見たことがある友達はおそらく知っています
新しいVueRouter（）の後、ルートデータは内部メソッドcreateMatcher（）に渡されます
createMatcherメソッドには、pathList、pathMap、nameMapの3つのオブジェクトと、addRoutesの2つのメソッドがあります。
3つのオブジェクトは、公開されていないため、コンパイルされたルーティングデータを保存するために使用されます。そのため、ルーターはコンパイルされたルーティングデータをクエリできません（router.optionsは実際には初期化時のデータであり、上記の例も役立ちます。 ）
2つのメソッドはcreateMatcherによって返され、最終的にthis.matcherに保存されます。this.matcherはrouter.matcherから呼び出すことができます。
上記のメソッドの本質は、新しいデータ、新しいルートオブジェクト_VueRouter
を使用して、新しいpathList、pathMap、nameMapを取得することです。
pathList、pathMap、およびnameMapは内部変数であり、直接呼び出すことはできないため
、addRoutes、matchなどの内部メソッドでのみ呼び出すことができます。したがって、
createMatcher全体を置き換えることによってマッチャーを置き換えます（ここにクロージャーの知識があります）
簡単に言えば、
新しいマッチャーには新しいaddRoutesが含まれ、新しいaddRoutesと一致し
、matchは新しいpathList、pathMap、nameMapを呼び出すことができます。
[email protected]のremoveRouteについて
vue3.xの開発に伴い、vueルーターも4.xを起動し（中国の公式ウェブサイトがこれについて言及していない理由はわかりません）
、removeRouteメソッドが4.xに追加されました。これは、ユーザーがルーティングルール
すでに[email protected]を使用している場合は
、私が言わなかったときの上記の言葉
終わり