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 サイト アプリケーションを作成する (複数の方法)
目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...
このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...
目次JavaScriptでは、 forループを記述する一般的な方法がいくつかあります。最初の、そして...
水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...
まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...
目次1. データ操作言語 (DML) 2. データを追加する(挿入) 3. 既存のテーブルをコピーし...
1. フォーム<form id="" name="" ...
キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...
目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...
目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...
目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...