Vue 開発を使用する場合、ルート パラメーターの受け渡しとルート ガードで発生する問題

Vue は、開発者が効率的で柔軟かつスケーラブルなユーザー インターフェイスを構築できるようにする JavaScript ベースのフロントエンド開発フレームワークです。 Vue の開発プロセスでは、ルーティング パラメータとルーティング ガードが一般的な問題になります。この記事では、これらの問題について説明し、具体的なコード例を示します。

1. ルーティング パラメーターの受け渡しの問題
Vue では、ルーティング パラメーターの受け渡しとは、ページがジャンプしている間にターゲット ページにデータを渡すことを意味します。一般的なシナリオには、ユーザーがリスト ページ上のアイテムをクリックして詳細ページにジャンプし、対応するアイテムに関する情報を詳細ページに渡すことが含まれます。ルートパラメータの受け渡しを実装する場合、Vue Router の params またはクエリを使用してパラメータを渡すことができます。

1. params を使用してパラメータを渡す
   Params は、動的パスの形式でターゲット ページにパラメータを渡す方法であり、パラメータを URL に含める必要がある状況に適しています。 。以下はサンプル コードです:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="'/detail/' + item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取params参数
    const id = this.$route.params.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. クエリを使用してパラメータを渡す
   クエリは、キーと値のペアの形式で URL にパラメータを追加する方法です。比較的大きなパラメータの場合 複数または複雑な状況。以下にサンプル コードを示します。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取query参数
    const id = this.$route.query.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. ルーティング ガードの問題
ルーティング ガードとは、ルート ジャンプの前後にいくつかの操作を実行する機能を指します。 Vue Router では、グローバル フロント ガード、グローバル ポスト ガード、コンポーネント内のガードを通じてさまざまなニーズを実現できます。

1. グローバル フロント ガード
   グローバル フロント ガードは、ルート ジャンプの前に、ユーザーの権限の確認やユーザーの行動の記録など、いくつかの操作を実行できます。以下はサンプル コードです。

// 路由守卫配置
router.beforeEach((to, from, next) => {
  // 判断用户是否处于登录状态
  const isLogged = checkLogin();
  
  if (to.meta.authRequired && !isLogged) {
    // 需要登录才能访问的页面
    next('/login');
  } else {
    next();
  }
});

2. グローバル ポスト ガード
   グローバル ポスト ガードは、ルート ジャンプ後に、ユーザーの行動の記録やページ ビュー数のカウントなどの一部の操作を実行できます。以下はサンプル コードです。

// 路由守卫配置
router.afterEach((to, from) => {
  // 统计页面浏览量
  recordPageView();
});

3. コンポーネント内のガード
   コンポーネント内のガードは、コンポーネントの前にユーザーが入力したデータを保存するなど、現在のコンポーネントに対して特定の操作を実行できます。または、フォームが完全に記入されていることを確認してください。以下はサンプル コードです:

// 组件内的守卫配置
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      // 提示用户保存未保存的数据
      const confirmed = window.confirm('是否保存未提交的数据？');

      if (confirmed) {
        // 保存数据
        this.saveData();
      }
    }

    next();
  }
}

上記は、Vue 開発で発生するルーティング パラメーターの受け渡しとルーティング ガードの問題の解決策です。 params またはクエリを使用してパラメータを渡し、グローバル プレガード、グローバル ポストガード、およびコンポーネント内のガードを組み合わせることで、より柔軟で安全なルーティング ジャンプと操作を実現できます。この記事があなたのお役に立てば幸いです。

以上がVue 開発を使用する場合、ルート パラメーターの受け渡しとルート ガードで発生する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。