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

npm インストール --save vue-router

vue プロジェクト名を作成
#Vue はどの設定を使用するか尋ねます。デフォルト ([Vue 2] babel、eslint)
デフォルト (Vue 3 プレビュー) ([Vue 3] babel、eslint)
手動で機能を選択する 

# 手動で機能を選択してください。Vue は現在のプロジェクトに必要な構成を尋ねます。プロジェクトに必要な機能を確認してください: (選択するには <space> を押し、すべてを切り替えるには <a> を押し、選択を反転するには <i> を押します)

>(*) Vueのバージョンを選択
(*) バベル
（）タイプスクリプト
（）プログレッシブウェブアプリ（PWA）のサポート
（）ルーター
（）ヴュークス
（）CSSプリプロセッサ
(*) リンター/フォーマッター
（）ユニットテスト
（）E2Eテスト   
#ルーターを選択し、実際の状況に応じて次の一連の質問を選択してください。

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

// src/main.js

'./router' からルーターをインポートします

新しいVue({
  ルーター、
  レンダリング: h => h(App)
}).$mount('#app')

to="/home" url="/home/user" 非厳密一致 to="/home" url="/home/user/10086" 非厳密一致 to="/home" url="/home" 厳密一致 to="/" url="/order" / はすべてのルートのルートルートなので、非厳密一致です

{
  パス: 文字列、
  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)
}

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

// 指定された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>

// 置換を使用してルートにジャンプします <router-link class="tab-item" replace to="/user">user</router-link>

// 現在のブラウザの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>

// router-link をページ上の span 要素としてレンダリングします <router-link tag="span" class="tab-item" to="/">Home</router-link>

// 現在のルータリンクのクラス名は、厳密に一致しない場合は aaaa です
<router-link active-class="aaaa" to="/order">注文</router-link>

//ダブルクリックとクリックの両方で、現在の要素のルートジャンプをトリガーできます <router-link :event="['dblclick','click']" to="/">ホームページ</router-link>

<トランジション名="フェード">
  <キープアライブ>
    <ルータービュー></ルータービュー>
  </キープアライブ>
</トランジション>