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>{{ 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에 접속하여 제품 정보를 얻을 수 있습니다. 그 페이지 .

요약하자면, Vue.js 페이지 점프에서 매개변수 누락 문제는 라우팅 구성이나 페이지 코드 문제로 인해 발생할 수 있습니다. 매개변수를 올바르게 얻을 수 있는지 확인하려면 라우팅 구성과 페이지 코드를 확인해야 합니다. 페이지를 렌더링할 수 있습니다.

위 내용은 Vue 페이지 점프는 값을 저장하지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!