Vueが動的にロードされたルーティング

まず、新しいプロジェクトVUEは、一般的に、我々は特定のルートに対処しませんが、より多くのプロジェクトページ、ルーティング設定が成長される際に、ルーティングファイルは、整備不良になります

「VUE」からインポートヴュー
「VUE-ルータ」からインポートルータ
「@ /コンポーネント/ HelloWorldの」からの輸入のHelloWorld 
「@ /コンポーネント/ホーム」からインポートホーム
「./test1.router.js'からの輸入のTest1 
」からの輸入にTest2 @ /コンポーネント/子供/ Test2'を
からインポートTest3は'@ /コンポーネント/子供/ Test3は' 

Vue.use（ルータ）

エクスポートデフォルト新しいルータ（{ 
  ルート：[ 
    { 
      パス： '/ HelloWorldの'、
      名前： 'のHelloWorld'、
      成分：HelloWorldの
    }、
    { 
      パス： '/'、
      名称： 'ホーム'、
      成分：ホーム、
      子供：[ 
        { 
          パス： '/ TEST2'、 
          名： 'Test2を'、
          成分：Test2を、
        }、
        { 
          パス： '/ TEST3'、
          名称： 'Test3は'、
          成分：Test3は、
        } 
      ] 

    } 
  ] 
}）

これは、前のメニューに応じて分類し、非常に単純なルーティング文書、我々は最適化を進めた最初のステップ、次のとおりです。

新test1.router.jsファイル、メニューtest1の内のすべてのルーティング情報を配置

エクスポートデフォルト{ 
    パス： '/ TEST1' 、
    名前： 'TEST1' 、
    成分：（） =>インポート（ '@ /コンポーネント/子供/ Test1を' ）、
    子供：[] 
}

コンポーネント：（）=>インポート（「@ /コンポーネント/子供/ Test1を」）これは、遅延ロードをルーティング設定するには、最初の画面最適化のロードに時間がかかる
ファイルindex.jsで導入を

「VUE」からの輸入のVue 
からインポートルータ「VUE-ルータの
からの輸入のHelloWorld「@ /コンポーネント/ HelloWorldの」
からの輸入ホーム「@ /コンポーネント/ホーム」
からの輸入のTest1「./test1.router.js' 
からの輸入にTest2」 ./test2.router.js' 
からインポートTest3は ./test3.router.js」

Vue.use（ルータ）

エクスポートデフォルト 新しいルータ（{ 
  ルート：[ 
    { 
      パス： '/ HelloWorldの' 、
      名前： 'のHelloWorld' 、
      成分：HelloWorldの
    }、
    { 
      パス： '/」 /」 、
      名：'ホーム' 、
      成分：ホーム、
      子供：[ 
        Test1を、
        Test2を、
        Test3は
      ] 

    } 
  ] 
}）

これを行うために、我々は多くのプロジェクトを満たさなければならない、とルート文書は非常に明らかにされているが、大規模なプロジェクト、不明瞭まだ

「VUE」からの輸入のVue 
からインポートルータ「VUE-ルータの
からインポートホーム「@ /コンポーネント/ホーム」

Vue.use（ルータ）


ルータを聞かせて = []; 

getALLRouterMsgせ =（パス）=> { 
    paths.keys（）。forEachの（
        （キー） => routers.push（パス（キー）。デフォルト）
    ）
} 
getALLRouterMsg（require.context（ ''、真 / \。ルータの\の.js / ））
輸出デフォルトの 新しいルータ（{ 
  路線：[ 
    { 
      パス： '/' 、
      名前： 'ホーム' 、
      コンポーネント：ホーム、
      子供：[ 
       ...ルーター
      ] 

    } 
  ] 
}）