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コンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

推薦する

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Excel ファイルを MySQL データベースにインポートする方法

この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...

Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

序文WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

MySQL でコマンドを使用して階層検索を実現する方法の詳細な説明

序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

CentOS7 構成 Alibaba Cloud yum ソースメソッドコード

Centos yumフォルダを開くコマンドcd /etc/yum.repos.d/を入力します。 w...

Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...

VUE ユニアプリテンプレート構文についての簡単な説明

1.v-bind(略称:)コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コン...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

MySQL でデータを削除してもテーブル ファイルのサイズが変更されないのはなぜですか?

長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...