インストール1. 既存のVueプロジェクトにvue-routerを手動でインストールする npm インストール --save vue-router 2. vue-cliを使用してvue-routerで新しいプロジェクトを作成します。スペース選択/キャンセルaすべて選択i反転 vue プロジェクト名を作成 #Vue はどの設定を使用するか尋ねます。デフォルト ([Vue 2] babel、eslint) デフォルト (Vue 3 プレビュー) ([Vue 3] babel、eslint) 手動で機能を選択する # 手動で機能を選択してください。Vue は現在のプロジェクトに必要な構成を尋ねます。プロジェクトに必要な機能を確認してください: (選択するには <space> を押し、すべてを切り替えるには <a> を押し、選択を反転するには <i> を押します) >(*) Vueのバージョンを選択 (*) バベル ()タイプスクリプト ()プログレッシブウェブアプリ(PWA)のサポート ()ルーター ()ヴュークス ()CSSプリプロセッサ (*) リンター/フォーマッター ()ユニットテスト ()E2Eテスト #ルーターを選択し、実際の状況に応じて次の一連の質問を選択してください。 ルーティングの基本構成
Vue にルーターをインストールする現在の Vue インスタンスでルーティング機能をサポートする必要がある場合は、Vue がインスタンス化されるときに、VueRouter インスタンス オブジェクトを Vue インスタンス構成オプション ルーターに挿入する必要があります。 (手動インストール) // src/router/index.js import Vue from 'vue' // Vue をインポート import VueRouter from 'vue-router' // VueRouterをインポート // Vue は VueRouter をサポートしています Vue.use(VueRouter) let router = new VueRouter() // VueRouterを初期化する 新しいVue({ router // VueRouter インスタンス オブジェクトを Vue インスタンス化構成オブジェクトの router オプションに設定します}).$mount('#app') main.js 内の参照 // src/main.js './router' からルーターをインポートします 新しいVue({ ルーター、 レンダリング: h => h(App) }).$mount('#app') ルーターの設定
厳密に一致するリンク タグのルート パスは現在のブラウザの URL と正確に一致している必要があり、厳密に一致しない現在のブラウザの URL は現在のリンクのサブルートになる可能性があることに注意してください。 例 to="/home" url="/home/user" 非厳密一致 to="/home" url="/home/user/10086" 非厳密一致 to="/home" url="/home" 厳密一致 to="/" url="/order" / はすべてのルートのルートルートなので、非厳密一致です Router.routes の設定{ パス: 文字列、 component?: Component, // 現在のルートが一致したときに表示されるルートコンポーネント name?: string, // 名前付きルート redirect?: string | Location | Function, // ルートリダイレクト props?: boolean | Object | Function, // alias?: string | Array<string>, // ルートエイリアス children?: Array<RouteConfig>, // ネストされたルート beforeEnter?: (to: Route, from: Route, next: Function) => void, // ルートガード caseSensitive?: boolean, // 一致ルールは大文字と小文字を区別しますか? (デフォルト値: false) } シンプルなルートの実装1. ルーティングを構成する'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 './App.vue' からアプリをインポートします。 './views/Home' から Home をインポートします。 './views/Order' から Order をインポートします。 './views/User' からユーザーをインポートします。 // Vue は VueRouter をサポートしています Vue.use(VueRouter) ルーター = new VueRouter({ ルート: [ { パス: '/home', コンポーネント: ホーム }, { パス: '/order', コンポーネント: 注文 }, { パス: '/user', コンポーネント: ユーザー } ] }) 新しいVue({ レンダリング: h => h(App), ルーター }).$mount('#app') 2. コンポーネントにルーティングを実装するVueRouterはVueに2つのコンポーネントを提供します
1. router-linkはルーティングのジャンプコンポーネントを実装するために使用されます。このコンポーネントでサポートされるプロパティto: 文字列 | 場所 ユーザーがこのコンポーネントをクリックすると、toで指定されたルートにジャンプします。 // 指定されたURLに移動する <router-link to="/home">ホーム</router-link> <router-link to="/order">注文</router-link> <router-link to="/user">ユーザー</router-link> /* 指定された場所へ移動する vue router の location オブジェクトの共通プロパティ { path:'/', //ジャンプ ルートのパスを指定します hash:'#top' //ジャンプ ルートのハッシュ値を指定します name: 'Home', //ジャンプ用の名前付きルートの名前値を指定します params: {}, //ジャンプ ルートによって渡される params オブジェクトを指定します query: {} //ジャンプ ルートによって渡されるクエリのキーと値のペアを指定します } */ <router-link :to="{path:'/user'}">ユーザー</router-link> // 場所を使用してページをリダイレクトする場合、現在の場所の params 属性をルーティング コンポーネントに渡すことはできません <router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'Xiao Ming'}}">user</router-link> // 名前ルートナビゲーションを使用すると、任意の名前付きルートにパラメータを渡すことができます <router-link :to="{name:'User',hash:'#top',params:{id:1,name:'Xiao Ming'}}">ユーザー</router-link> // クエリは名前ナビゲーションとパスナビゲーションをサポートします。クエリを使用してオブジェクト属性を渡すことは推奨されません <router-link :to="{name:'User',hash:'#top',query:{id:1,name:'Xiao Ming'}}">user</router-link> replace: bool このプロパティが true の場合、ルートジャンプは置換の形式で次のページにジャンプします (次のルートは、現在のブラウザ履歴スタック内の URL をジャンプするルートに置き換えます)。デフォルト値は false です。 // 置換を使用してルートにジャンプします <router-link class="tab-item" replace to="/user">user</router-link> append: bool このプロパティが true の場合、現在のルートが相対パス (パスが / で始まっていない) である場合、ルートのジャンプはブラウザの URL に基づいて次のレベルに進みます。デフォルト値は false です。 // 現在のブラウザのURLが/orderの場合 // Gec をクリックすると /order/gec にジャンプします <router-link to="gec" append>Gec</router-link> // Gec1をクリックします。Gec1のtoは相対パスではないため、appendは無効となり、ルートは/gecにジャンプします。 <router-link to="/gec" append>Gec1</router-link> // 追加せずにGec2をクリックすると/gecにジャンプします <router-link to="gec">Gec2</router-link> タグ: 文字列は、ルータリンクタグがページにレンダリングされるDOM要素を指定します。デフォルト値は // router-link をページ上の span 要素としてレンダリングします <router-link tag="span" class="tab-item" to="/">Home</router-link> active-class: 文字列は、ブラウザの URL と厳密に一致しない場合に、現在の router-link 要素のクラス名を指定します。デフォルト値は、VueRouterがインスタンス化されるときに指定されたlinkActiveClass値です。 // 現在のルータリンクのクラス名は、厳密に一致しない場合は aaaa です <router-link active-class="aaaa" to="/order">注文</router-link> event: string | Array<string> 現在のルーターリンク要素を指定し、ナビゲーションをトリガーするために使用できるイベントを宣言します。文字列または文字列を含む配列にすることができます。デフォルト値はクリックです //ダブルクリックとクリックの両方で、現在の要素のルートジャンプをトリガーできます <router-link :event="['dblclick','click']" to="/">ホームページ</router-link> 2. router-viewは、現在のVueRouter構成に応じてルーティングパスが変更された場合、対応するルーティングビューコンポーネントをレンダリングします。router-view コンポーネントは、パスに一致するビュー コンポーネントをレンダリングする機能コンポーネントです。 レンダリングされたコンポーネントは、独自のルータービューを埋め込み、ネストされたパスに従ってネストされたコンポーネントをレンダリングすることもできます。 その他のすべての属性 (router-view では使用されない name を除く) は、レンダリングされたコンポーネントに直接渡されます。多くの場合、各ルートのデータはルート パラメータに含まれています。 コンポーネントでもあるため、遷移やキープアライブで使用できます。両方を一緒に使用する場合は、必ず内側のレイヤーで keep-alive を使用してください。 <トランジション名="フェード"> <キープアライブ> <ルータービュー></ルータービュー> </キープアライブ> </トランジション> 以上がVue-Routerのインストールと使い方の詳しい説明です。Vue-Routerのインストールと使い方の詳細については、123WORDPRESS.COMの他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?
>>: Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明
ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...
序文WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方...
方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...
今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...
序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...
序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...
Centos yumフォルダを開くコマンドcd /etc/yum.repos.d/を入力します。 w...
目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...
1.v-bind(略称:)コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コン...
日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...
長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...