Vue-Routerのインストールと使用方法の詳細な説明

Vue-Routerのインストールと使用方法の詳細な説明

インストール

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テスト   
#ルーターを選択し、実際の状況に応じて次の一連の質問を選択してください。

ルーティングの基本構成

  1. 最初のインストール方法(手動インストール)を選択した場合は、srcフォルダの下にrouterという名前のフォルダを手動で作成し、新しいindex.jsファイルを作成する必要があります。
  2. 2 番目のインストール方法 (カスタム インストール) を選択した場合は、自分で構成する必要はなく、新しいプロジェクトが完了したらすぐに使用できます。

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')

ルーターの設定

物件名タイプ説明する
ルート配列現在のルーターのすべてのルーティング構成
モード文字列可能な値: "hash" / "history"デフォルト値は「ハッシュ」です。このモードでは、ルートはハッシュを使用して、ルートがビューと一貫していることを確認します。履歴モードでは、h5 を使用して window.history を追加し、ルートとビューの一貫性を実現します。
リンクアクティブクラス文字列デフォルト値: "router-link-active"グローバル構成 デフォルトでアクティブ化されたクラス
リンクExactActiveClass文字列デフォルト値: "router-link-exact-active"グローバル構成 デフォルトの正確なアクティベーション クラス。

厳密に一致するリンク タグのルート パスは現在のブラウザの 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の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • vue-router 4 の使用例の詳しい説明
  • Vue でのルータービューコンポーネントの使用に関する詳細な説明
  • Vue3ルーティングVueRouter4を使用する簡単な例
  • vue3 で vue-router を使用するための完全な手順
  • Vue-routerルーティングの使い方
  • vue3.0 で Router を使用する方法をご存知ですか?

<<:  MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

>>:  Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

推薦する

Vueは質問応答機能を実装する

1. リクエスト回答インターフェース2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...

Web面接におけるJS事前解析と変数プロモーションの違い

目次事前分析とは何ですか?変数と関数の準備の違いvar 変数の繰り返し宣言変数と関数の昇格の優先順位...

MySql 自動切り捨て例の詳細な説明

MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...

Docker は Python Flask+ nginx+uwsgi コンテナを構築します

Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

MySQLでユーザーを作成し、ユーザーに権限を付与する方法の詳細なチュートリアル

目次ユーザー管理新しいユーザーを作成するユーザー名の変更ユーザーのパスワードを設定するルートパスワー...

Centos7 システムでの python2 と python3 の共存

最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...

CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...

SQL 面接の質問: 時間差の合計を求める (重複は無視)

ある会社の BI 職の面接を受けたとき、面接で SQL に関する質問がありました。一見すると非常に簡...

JavaScript 基礎シリーズ: 関数とメソッド

目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...