Vue のページジャンプでは値が保存されません

1. 問題の説明

Vue.js では、$route.params を使用してジャンプ パラメーターを取得すると、ページはジャンプ後のパラメーター値を取得できず、パラメーターが失われます。

2. 問題分析

1. ジャンプ パラメーターが認識されないのは、ルーティング設定の問題が原因である可能性があります。

2. ジャンプ ページのコードがジャンプ パラメーターを正しく処理していないため、パラメーター値が表示されない可能性があります。

3. 問題解決

1. ルーティング設定をチェックして、パラメーターが正しく定義されていることを確認します。

2. ジャンプ ページの作成またはマウントされたライフ サイクル フックで、$route.params を使用してパラメータを取得し、パラメータ値を変数に割り当て、テンプレート内の変数を使用してページをレンダリングします。 。

4. サンプル コード

1. ルーティング設定:

{
  path: '/product/:id',
  name: 'product',
  component: Product
}

2. 製品コンポーネント コード:

<template>
  <div>
    <h2 id="product-name">{{ product.name }}</h2>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {},
    };
  },
  created() {
    this.getProduct(this.$route.params.id);
  },
  methods: {
    getProduct(id) {
      // 发送请求获取产品信息
      axios.get(`/api/products/${id}`).then((response) => {
        this.product = response.data;
      });
    },
  },
};
</script>

この設定後、/product/123 にアクセスします。 ID 123 の製品情報を取得して、ページに表示できます。

要約すると、Vue.js のページ ジャンプでパラメータが欠落している問題は、ルーティング設定またはページ コードの問題が原因である可能性があります。ルーティング設定とページ コードをチェックして、パラメータが適切であることを確認する必要があります。正しく取得され、ページがレンダリングされます。

以上がVue のページジャンプでは値が保存されませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。