programing

Next 2와 3에서 현재 경로 이름을 얻는 방법은 무엇입니까?

sourcejob 2023. 6. 13. 22:15
반응형

Next 2와 3에서 현재 경로 이름을 얻는 방법은 무엇입니까?

정적인 웹사이트를 구축하기 위해 Nuxt.js를 사용하고 있습니다.

구성 요소에서 액세스하는 방법script코드가 현재 표시된 경로 이름(브라우저 위치에서 직접 URL을 읽는 것을 피하고 싶습니다)?

어떻게든 접근할 수 있습니까?$route.name?

Next2에서

예, 당신은 vuejs 경로 객체를 사용할 수 있습니다.$route.name또는$route.path

$nuxt.$route.path

현재 경로 반환

$nuxt.$route.name

현재 경로의 이름(경로가 있는 경우)

경로 객체 특성

경로 개체는 현재 활성 경로의 상태를 나타냅니다.여기에는 현재 URL의 구문 분석된 정보와 URL과 일치하는 경로 레코드가 포함됩니다.

  • $route.path

  • 유형: 문자열

  • 현재 경로의 경로와 동일한 문자열로, 항상 절대 경로로 확인됩니다(예: "/foo/bar").

  • $route.fullPath

  • 유형: 문자열

  • 쿼리 및 해시를 포함한 전체 확인 URL입니다.

**

그리고 url params를 받고 싶다면요.이와 같이: 다음을 수행:

  data() {
    return {
       zone: this.$nuxt.$route.query.zone,
       jour: this.$nuxt.$route.query.jour
        
    }   },

**

Vue2에서

다른 방법은 다음 중 하나를 사용하는 것입니다.

  • this.$route.path예:http://localhost:3000,{{this.$route.path}}인쇄 예정/
  • this.$route.name예:http://localhost:3000,{{this.$route.name}}인쇄 예정index

Nuxt3 및 Composition API를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

<script setup>
const route = useRoute()
console.log('current name', route.name)
</script>

또는 옵션 API 포함

<script>
export default {
  mounted () {
    console.log('current name', this.$route.name)
  },
}
</script>

여기 제 이전 답변에 나와 있는 것처럼, https://stackoverflow.com/a/72212136/8816585 .

다음 3번용

export default ({
   setup () {
    const route = useRoute()
    return {
      route
    }
  }
})

템플릿 뒤에

{{ route.name }}

Nuxt v2 컴포지션 API용

import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'

export default defineComponent({
   setup() {
       const route = useRoute()
       const routeName = computed(() => route.value.name)
       return { routeName }
   },
})

Next 3의 경우 라우터에서 currentRoute를 사용할 수 있습니다.

const { currentRoute } = useRouter();
const routeName = currentRoute.value.name;

언급URL : https://stackoverflow.com/questions/44748575/how-to-get-current-route-name-in-nuxt-2-and-3

반응형