Vue는 어떻게 경로 이름을 얻고 다른 데이터를 로드합니까?

프런트엔드 개발 기술이 지속적으로 발전함에 따라 실제 개발에 점점 더 많은 프론트엔드 프레임워크와 라이브러리가 널리 사용되고 있으며, 그중 vue.js는 인기 있는 프론트엔드 프레임워크 중 하나가 되었습니다. 많은 웹 애플리케이션 개발자가 선호하는 프레임워크입니다. vue에서 경로 점프 후 얻은 경로 이름에 따라 다른 데이터를 로드하는 방법은 무엇입니까? 이 기사에서는 구현 방법을 제공합니다.

1. vue-router

vue 공식 문서에는 라우팅 관리자 라이브러리 vue-router가 도입되었습니다. 애플리케이션이 복잡한 페이지 점프 및 상태 관리를 수행해야 할 때 vue-router를 사용하면 더 좋은 솔루션을 제공할 수 있습니다. . vue-router는 비동기 로딩, 라우팅 매개변수, 탐색 후크, 중첩 라우팅과 같은 강력한 기능을 갖추고 있으며 Vue 애플리케이션 구축에도 편의성을 제공합니다.

2. 경로 점프 및 매개변수 전송

vue-router에서는 일반적으로 경로 점프를 위해 router-link 또는 $router.push() 메서드를 사용합니다. 이 두 가지 방법의 핵심은 URL 주소를 변경하는 것입니다. 점프를 라우팅할 때 매개변수를 전달하는 것도 매우 간단합니다. 쿼리 또는 매개변수 매개변수를 점프 링크에 추가하기만 하면 됩니다.

예를 들어, 이제 다음과 같은 라우팅 구성이 있습니다.

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

동시에 세부 경로로 점프할 때 id 매개변수를 전달해야 합니다. 다음과 같이 구현할 수 있습니다.

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link>Detail</router-link>

매개변수를 얻는 방법. 세부 구성 요소의 경로를 통과했습니까? 이렇게 할 수 있습니다:

this.$route.query.id

params 매개변수인 경우 사용 방법이 약간 다르다는 점에 유의해야 합니다. 링크를 점프할 때 params 매개변수를 사용해야 하는 것 외에도 경로를 구성할 때 동적 매개변수를 포함하도록 경로도 수정해야 합니다. 예는 다음과 같습니다.

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

링크를 점프할 때 매개변수를 변경해야 합니다. params 객체에 포함된 이름과 라우팅 구성에 선언된 매개변수 이름은 일대일 대응입니다. 예는 다음과 같습니다.

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link>Detail</router-link>

detail 컴포넌트에서 경로를 통해 전달된 매개변수를 가져올 때 $route.params.id를 사용하세요.

3. 데이터를 동적으로 렌더링

실제 애플리케이션에서는 경로 이름에 따라 다른 데이터를 동적으로 로드해야 하는 경우가 있습니다. 일반적으로 경로 이름을 기반으로 데이터를 가져와 구성 요소의 생성 또는 마운트된 후크 기능에서 렌더링할 수 있습니다. 예:

export default {
  name: 'Detail',
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const name = this.$route.name
      if(name === 'detailA') {
        // 加载数据A
        axios.get('/api/detailA').then(res => {
          this.detailData = res.data
        })
      } else if(name === 'detailB') {
        // 加载数据B
        axios.get('/api/detailB').then(res => {
          this.detailData = res.data
        })
      }
      // ... 可以根据需要继续添加其他路由名称的loading操作
    }
  }
}

위의 예에서는 $route.name을 기반으로 현재 경로 이름을 결정한 다음 해당 요청을 보내 데이터를 로드하고 이를 구성 요소의 데이터 속성에 저장한 다음 데이터를 렌더링합니다. 그 페이지.

4. 요약

이 글에서는 Vue 애플리케이션에서 현재 경로 이름을 가져오고 이름에 따라 다른 데이터를 로드하는 방법을 주로 소개합니다. vue-router에서 제공하는 경로 점프 및 매개변수 전달 기능을 사용하여 로드할 데이터와 경로 이름을 매핑한 다음, 컴포넌트가 생성하거나 마운트한 후크 함수에서 경로 이름에 따라 해당 데이터를 로드할 수 있습니다. 이 구현 방법은 간단하고 편리하며 개발 효율성도 향상시킬 수 있습니다.

위 내용은 Vue는 어떻게 경로 이름을 얻고 다른 데이터를 로드합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!