インストール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コンテナのホスト間通信におけるダイレクトルーティングの詳細な説明
1. リクエスト回答インターフェース2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...
目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...
MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...
Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...
目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...
暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...
目次ユーザー管理新しいユーザーを作成するユーザー名の変更ユーザーのパスワードを設定するルートパスワー...
最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...
CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...
ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...
目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...