vue が新しいルートを置き換えます

Vue の開発に伴い、フロントエンド フレームワークとして Vue を使用する Web アプリケーションがますます増えています。アプリケーションが拡張および更新されると、常に新しいルートを追加し、古いルートを置き換える必要があります。では、Vue でルーティングを置き換えるにはどうすればよいでしょうか?

Vue で一般的に使用されるルーティング ライブラリは Vue Router です。 Vue Router は、Vue.js が公式に提供しているルーティングマネージャーで、SPA (Single Page Application) のルーティング制御を簡単に実現できます。 Vue Router を使用する場合、次の 3 つの重要な概念を習得する必要があります。

1. Router
   Router は Vue Router のインスタンスであり、Vue Router の作成を担当します。ルートを定義する場合は、新しい Router(オプション) を使用してインスタンスを作成する必要があります。 Vue では、通常、router.js ファイルに Router インスタンスを個別に記述し、それを main.js 内の Vue インスタンスに導入してマウントします。
2. Routes
   Routes は配列であり、各 Route は URL パスとコンポーネントに対応します。 URL がルートと一致すると、対応するコンポーネントが App.vue の タグにレンダリングされます。各 Route オブジェクトには、パスとコンポーネントという少なくとも 2 つのプロパティが含まれている必要があります。
3. Router-view
   Router-view は、Vue Router によって提供されるコンポーネントであり、一致したコンポーネントをレンダリングするために使用されます。 App.vue では、一致する Component コンポーネントをホストするために タグを追加する必要があります。

次に、Vue Router でルートを置き換える方法を説明します。まず、アプリケーションがホームページ (Home)、ユーザー詳細ページ (UserDetail)、および会社概要ページ (AboutUs) の 3 つのページで構成されていると仮定します。ここで、ユーザーの詳細ページをユーザー一覧ページ (UserList) に変更し、対応するルートを置き換える必要があります。

最初のステップでは、router.js ファイル内の対応するルートを変更する必要があります。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserList from '@/views/UserList.vue';
import AboutUs from '@/views/AboutUs.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/userList',
    name: 'userList',
    component: UserList,
  },
  {
    path: '/aboutUs',
    name: 'aboutUs',
    component: AboutUs,
  },
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

ここでは、UserDetail コンポーネントを UserList コンポーネントに置き換え、対応するパスを変更します。ルーティング設定を変更した後、変更を有効にするために Vue アプリケーションを再起動する必要があることに注意してください。

2 番目のステップでは、Vue コンポーネントの router-link タグを使用してルーティング ジャンプを実行する必要があります。私たちのアプリケーションでは、ユーザーがユーザー リスト ページに直接ジャンプできるように、ホームページ上のユーザー リストへのリンクを追加する必要があります。

Home.vue ページを変更し、router-link タグを追加し、対応する to 属性を設定します:

<template>
  <div>
    <h1>欢迎访问我的应用</h1>
    <router-link to="/userList">用户列表</router-link>
    <router-link to="/aboutUs">关于我们</router-link>
  </div>
</template>

<script>
export default {};
</script>

ここでは、to 属性を「/userList」に設定します。ユーザーがリンクをクリックすると、ユーザー一覧ページにジャンプします。

3 番目のステップでは、関連するビジネス ロジックを UserList.vue コンポーネントに追加する必要があります。ここでは、ユーザー リスト情報が UserList コンポーネントに表示されると仮定します。

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '小明',
          age: 20,
          gender: '男',
        },
        {
          name: '小红',
          age: 21,
          gender: '女',
        },
        {
          name: '小华',
          age: 22,
          gender: '男',
        },
      ],
    };
  },
};
</script>

ここでは、v-for ディレクティブを使用して、userList 内の各ユーザー オブジェクトを li 要素にレンダリングします。

上記の手順により、ユーザーの詳細ページがユーザー リスト ページに置き換えられ、対応するリンクがホームページに追加されました。実際の開発では、特定のビジネス ニーズに応じてルートを合理的に設計および置換すると同時に、アプリケーションが正常に動作するように、関連する概念と Vue Router の使用法に注意を払う必要があります。

以上がvue が新しいルートを置き換えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。