Vue 学習 - VueRouter ルーティングの基礎

1. Vueルーター

1. 説明

Vue.js + Vue Router を使用してシングルページ アプリケーションを作成するのは自然なことです。Vue.js Vue.js 、コンポーネントを組み合わせてアプリケーションを作成できます。これにVue Routerを追加する場合は、 components routesにマップし、 Vue Router 在それらをレンダリングする場所を指示するだけです。ルートは本質的にハイパーリンクです。

2. 選択したルートのレンダリング:

（１）ルータリンクアクティブクラス

特定の場所にルーティングする場合、対応するルーティング タグにクラス名が追加されます。
たとえば、「About」をクリックすると、「About」に対応するページにジャンプします。

（２）ルータリンクアクティブクラス

ルーティングでは、子ルートのパス設定（例：http://localhost/home）に親ルートのパス設定（例：http://localhost/）が含まれます。その後、子ルートをクリックして、子ルートにrouter-link-activeクラスが追加されると、親ルートにもrouter-link-activeクラスが追加されます。つまり、(http://localhost/home) ルートをクリックすると、両方のルートが選択されます。

3. 基本的な動作原理

vueの html 部分に router-link を導入します (a の原理と同様)。to 属性はジャンプ先の vue コンポーネントであり、 router-view現在のルートが指すコンテンツを表示する役割を担うため、単一ページでもページジャンプの効果を実現できます。

2. 実際の戦闘

1. ルーターを使用してvueプロジェクトを作成する

2. プロジェクト内のsrc/router/index.jsファイルを開きます。

プロジェクトによって 2 つのルートが自動的に生成されたことがわかります。1 つはhomeで、もう 1 つはaboutインターフェイスです。パスはそれぞれ'/'と'/about'です。

ルートディレクトリのmain.jsを開くと、main.js にルーティングが導入されており、すべてのコンポーネントでルーティングを使用できることがわかります。

3. ブラウザでプロジェクトを開く

HomeとAbout 2 つのルート ナビゲーションが表示されます。

4. 新しいルートを作成する

ホームページ、メッセージ、ショッピングカート、そして私の 4 つの部分を含む、Taobao に似たルート ナビゲーションを作成します。

4 つのルートに対応する 4 つの新しい vue ファイルを作成します。

ルーティングindex.jsファイルを構成する

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../views/Home.vue' から Home をインポートします。

Vue.use(VueRouter)

定数ルート = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: ホーム
  },
  {
    パス: '/message',
    名前: 'メッセージ',
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Message.vue')
  },
  {
    パス: '/goodcar',
    名前: 'GoodCar'、
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/GoodCar.vue')
  },
  {
    パス: '/me',
    名前: 「私」
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Me.vue')
  }
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

App.vueでナビゲーションバーを設定する

<テンプレート>
  <div id="アプリ">
    <div id="nav">
      <router-link to="/">ホーム</router-link>
      <router-link to="/message">メッセージ</router-link>
      <router-link to="/goodcar">ショッピングカート</router-link>
      <router-link to="/me">マイ</router-link>
    </div>
    <ルータービュー/>
  </div>
</テンプレート>

<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
}

#ナビ{
  パディング: 30px;
  マージン: 0 自動;
  幅: 30%;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
}

#nav {
  フォントの太さ: 太字;
  色: #2c3e50;
  テキスト装飾: なし;
}

#nav a.router-link-exact-active {
  色: #42b983;
}
</スタイル>

結果：

これで、ルーティングの基本的な概念とその構成および機能が理解できました。

これで、Vue 学習 - VueRouter ルーティングの基本に関するこの記事は終了です。VueRouter ルーティングの基本に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。