1. 前提条件インポートには require.context メソッドを使用します。vite で作成したプロジェクトで使用すると、「require not found」というエラーが報告されるため、webpack を使用してプロジェクトを作成する必要があります。または、Vite でこの問題を解決する方法を教えてもらえますか。 II. ルール私たちが使用するルールは、src/views/ パスの下にあるすべてのディレクトリとサブディレクトリを検索し、「index.vue」という名前のファイルを検索し、親ディレクトリの名前を登録用のコンポーネント名として使用することです。構造は次のとおりです。 パブリックコンポーネントの登録と同様に、index.vue コンポーネントのみを登録し、他の名前のコンポーネントは登録されません。 3. インポート// src/router/index.ts 'vue-router' から {createRouter、createWebHashHistory、createWebHistory、RouteRecordRaw} をインポートします。 「@/store」からストアをインポートします。 import daxie from "@/util/upper"; // 文字列の最初の文字を大文字にするメソッドを導入します。私はパス名の最初の文字を大文字にすることに慣れています。 // 自動ルーティング登録 const routerList:any = [] const requireComponent = require.context('@/views', true, /index.vue$/) // views パスの下にあるすべてのファイルを検索 const dynamic_route = requireComponent.keys().filter(fileName => { 真を返す }) // これでファイル配列の順序が乱れました。まず親ルートを先頭にして並べ替えます。子ルートが先頭にあり、親ルートが作成されていない場合は、エラーが報告されます。 // console.log(dynamic_route,"Before sorting") dynamic_route.sort(関数(a,b):数値{ const jieguoa:any = a.split("").filter((item:string)=>{ 戻り値 "/" == 項目 }) const jieguob:any = b.split("").filter((item:string)=>{ 戻り値 "/" == 項目 }) (jieguoa.length<jieguob.length)の場合{-1を返す} jieguoa.length>jieguob.lengthの場合{1を返す} 0を返す }) // console.log(dynamic_route,"ソート後") dynamic_route.forEach(ファイル名 => { const パス = ファイル名.replace(".", "") const namelist = fileName.replace(".", "").replace("index.vue", "").split("/").filter((i:any) => { 戻る }) // テスト構成 const componentConfig = requireComponent(fileName) // コンポーネントは任意の属性を任意に追加できます。現在、必要な動的パラメータを格納する配列である canshu 属性が追加されています。// console.log(componentConfig.default,"Component Configuration 2") // 各レイヤーは手動で指定する必要があるため、3 つのレイヤーだけを指定します if (namelist.length == 1) { ルータリスト.push({ パス:"/"+ namelist[namelist.length - 1], 名前: daxie(namelist[namelist.length-1]), コンポーネント:()=>import(`../views${path}`), 子供たち:[]、 }) }そうでない場合(namelist.length == 2){ routerList.forEach((item:any)=>{ if(item.name == daxie(namelist[0])){ // コンポーネントにパラメータが必要かどうかを判定する const canshu = componentConfig.default.canshu || [] if(canshu){ (i=0;i<canshu.length;i++) の場合 カンシュ[i] = "/:"+カンシュ[i] } アイテム.children.push({ パス: namelist[namelist.length-1] + canshu.join(""), 名前: daxie(namelist[namelist.length-1]), コンポーネント:()=>import(`../views${path}`), 子供たち:[]、 }) }それ以外{ アイテム.children.push({ パス: namelist[namelist.length-1], 名前: daxie(namelist[namelist.length-1]), コンポーネント:()=>import(`../views${path}`), 子供たち:[]、 }) } } }) }そうでない場合(namelist.length == 3){ routerList.forEach((item:any)=>{ if(item.name == daxie(namelist[0])){ item.children.forEach((yuansu:any)=>{ if (yuansu.name == daxie(namelist[1])){ // パラメータが必須かどうかを判定する const canshu = componentConfig.default.canshu || [] if(canshu){ (i=0;i<canshu.length;i++) の場合 カンシュ[i] = "/:"+カンシュ[i] } yuansu.children.push({ パス: namelist[namelist.length - 1]+canshu.join(""), 名前: daxie(namelist[namelist.length-1]), コンポーネント:()=>import(`../views${path}`), }) }それ以外 { yuansu.children.push({ パス: namelist[namelist.length - 1], 名前: daxie(namelist[namelist.length-1]), コンポーネント:()=>import(`../views${path}`), }) } } }) } }) } }) const ルート: Array<RouteRecordRaw> = [ { パス: '/'、 名前: 'ホーム'、 コンポーネント: ()=>import("@/views/shouye/shouye.vue") }, { パス: '/about', 名前: 'About'、 コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, ...ルーターリスト、 { パス: '/404', 名前: '404', コンポーネント: () => import('@/views/404.vue') }, { パス: '/:pathMatch(.*)', リダイレクト: '/404' }, ] // 順序に注意してください。最新のルーティング マッチング ルールによれば、404 ページは最後にある必要があります。 console.log(routes,"ルーティングテーブルの内容を表示する") const ルーター = createRouter({ 履歴: createWebHistory(), // 履歴: createWebHashHistory(), ルート }) デフォルトルーターをエクスポートする このように、ルールに従ってコンポーネントを作成するだけで、ルートに自動的に登録されます。面倒な手動登録操作を排除します。 要約するこれで、vue3.0 ルート自動インポートに関するこの記事は終了です。vue3.0 ルート自動インポートに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法
>>: Docker を使用して静的 Web サイト アプリケーションを作成する (複数の方法)
MySQL エラー: パラメータ インデックスが範囲外です (1 > パラメータ数、つまり 0...
シナリオ 1: HTML: <div class="outer"> ...
幅と高さを直接使用することはできません。 display:block; または display:in...
目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...
目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...
多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...
1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...
概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...
Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...
1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...
ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...
1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...
スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...
目次1. スワップパーティション SWAP 1.1 スワップファイルを作成する1.2 スワップパーテ...