Vue 개발을 사용할 때 경로 매개변수 전달 및 경로 보호에서 발생하는 문제

Vue는 개발자가 효율적이고 유연하며 확장 가능한 사용자 인터페이스를 구축하는 데 도움이 되는 JavaScript 기반 프런트 엔드 개발 프레임워크입니다. Vue 개발 과정에서 라우팅 매개변수와 라우팅 가드는 몇 가지 일반적인 문제입니다. 이 문서에서는 이러한 문제를 설명하고 특정 코드 예제를 제공합니다.

1. 라우팅 매개변수 전달 문제
Vue에서 라우팅 매개변수 전달은 페이지가 점프하는 동안 대상 페이지에 일부 데이터를 전달하는 것을 의미합니다. 일반적인 시나리오에는 사용자가 목록 페이지에서 항목을 클릭한 다음 세부 정보 페이지로 이동하고 해당 항목에 대한 정보를 세부 정보 페이지에 전달하는 것이 포함됩니다. 경로 매개변수 전달을 구현할 때 Vue Router의 매개변수 또는 쿼리를 사용하여 매개변수를 전달할 수 있습니다.

1. 매개변수를 사용하여 매개변수 전달
   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 id="project-name">{{ 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 id="project-name">{{ 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 개발에서 발생하는 라우팅 매개변수 전달 및 라우팅 가드 문제에 대한 솔루션입니다. 매개변수 또는 쿼리를 사용하여 매개변수를 전달하고 글로벌 사전 가드, 글로벌 포스트 가드 및 구성 요소 내의 가드를 결합함으로써 보다 유연하고 안전한 경로 점프 및 작업을 달성할 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 Vue 개발을 사용할 때 경로 매개변수 전달 및 경로 보호에서 발생하는 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!