close

Routing そして.js Navigation で Vue- 包括的なガイド

Routing および は、 Web アプリケーションでページを作成しページ間を移動するための .js Navigation の重要な概念です。 は、 .js でシステム を管理するための強力で柔軟なライブラリです。 Vue Vue Router routing Vue

 

route.jsの に関連する基本概念は次のとおりです Vue。

  1. Route: A は route パスを定義し、対応するコンポーネントにリンクします。 それぞれに route パスとコンポーネントがあります。

  2. Vue Router: を .js で 管理するためのライブラリです 。 アプリケーション内で を 定義および管理するためのツールを提供します 。 Vue Router route Vue route Vue

  3. Route コンポーネント: それぞれ route に対応するコンポーネントがあります。 が route アクティブ化されると、関連するコンポーネントが表示されます。

  4. Dynamic Route: Dynamic を使用すると、 動的パラメータを使用して route を定義できます。 route たとえば、 route パス「/user/:id」を使用して を定義すると、対応する ID を持つユーザー情報を表示できます。

  5. ネスト Route: ネストとは、 親の中に route 子をネストできるようにする概念です 。 これにより、複雑な 構造を構築し、コンポーネントをネストした方法で編成することができます。 route route route

  6. リダイレクト Route: リダイレクトを使用すると、 route ユーザーをあるパスから別のパスにリダイレクトできます。 route これは、ユーザーを古いパスから新しいパスに 移動させたい場合に便利です。

  7. Route ガード: route ガードは、 へのアクセスをチェックおよび制御できる機能です route。 ガードを使用すると route 、ユーザーが特定の にアクセスできないようにする条件を定義したり route 、リダイレクト前に特別な処理を実行したりできます。

 

を使用するには 、次の手順に従います。 Vue Router

ステップ 1: npm または Yarn を使用して インストールします。 Vue Router 

npm install vue-router

また 

yarn add vue-router

ステップ 2: プロジェクトのルート ディレクトリにファイルを 作成します。 このファイルでは、アプリケーションの を 宣言して構成します。 router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

ステップ 3: ファイルに main.js インポートし てアプリケーションにリンクします 。 Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

ステップ 4: ファイル内で、 、 、その他のプロパティ などのコンポーネントを 使用して を 宣言できます。 router.js route Vue Router path component

たとえば、次のように route ホームページの を宣言し、 route 概要ページの を宣言できます。 

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

ステップ 5: コンポーネントでは、 他の へのリンクを作成したり 、 現在の のコンテンツを表示したりするため Vue にコンポーネントを使用できます 。 <router-link> route <router-view> route

たとえば、Home コンポーネントのテンプレートでは、以下を使用して about ページへのリンクを作成できます。 <router-link> 

<router-link to="/about">Go to About</router-link>

App コンポーネントのテンプレートでは、 現在の のコンテンツを表示するために使用できます 。 <router-view> route 

<router-view></router-view>

これらの手順により、.js アプリケーションの 設定と 管理 が完了しました 。 Vue Router routing navigation Vue