Vue : Programmatic Navigation

Programmatic Navigation

Navigation is triggered using Vue Router when a <router-link> is clicked, but also can be triggered programmatically from inside our code.

<router-link>를 클릭하면 Vue Router를 사용하여 탐색이 트리거되지만 코드 내부에서 프로그래밍 방식으로 트리거될 수도 있습니다.

 

Problem: Form Submit

The most common place you’ll want to programmatically navigate is when a form is submitted.

프로그래밍 방식으로 탐색하려는 가장 일반적인 장소는 양식이 제출될 때입니다.

<template>
  <p>Regstration form here</p>
  <button @click="register">Register Me!</button>
</template>
<script>
export default {
  props: ['event'],
  methods: {
    register() {
      // If registration API call is successful
      // Push back to the event details
    }
  }
}
</script>

Solution: this.$router.push

A call to this.$router.push, with the arguments the same as when we use <router-link>.

<router-link>를 사용할 때와 동일한 인수를 사용하여 this.$router.push를 호출합니다.

<template>
  <p>Regstration form here</p>
  <button @click="register">Register Me!</button>
</template>
<script>
export default {
  props: ['event'],
  methods: {
    register() {
      // If registration API call is successful
      this.$router.push({
        name: 'EventDetails',
        params: { id: this.event.id }
      })
    }
  }
}
</script>

Side note: It’d be nice to give the user some sort of message on this page to let them know their registration is successful.  이 페이지에서 사용자에게 등록이 성공했음을 알리는 일종의 메시지를 제공하는 것이 좋을 것입니다.

 

Other Push Examples

When you click on a <router-link> it’s simply calling the $router.push function inside the code.

<router-link>를 클릭하면 코드 내에서 $router.push 함수가 호출됩니다.

// Directly to the path with a single string
this.$router.push('/about')

// Directly to the path with an object
this.$router.push({ path: '/about' })

// Directly to the named path
this.$router.push({ name: 'About' })

// With a dynamic segment as I showed above
this.$router.push({ name: 'EventDetails', params: { id: 3 } })

// With a query ... resulting in /?page=2 in our example app
this.$router.push({ name: 'EventList', query: { page: 2 } })

The params and query values can be variables.

params 및 쿼리 값은 변수일 수 있습니다.

 

Navigation & Replace

Navigate the user away from a page, while not pushing a new history entry in their browser (effectively rendering the back button useless for returning to the current page).

브라우저에 새 기록 항목을 푸시하지 않고 사용자를 페이지 밖으로 이동합니다.( 현재 페이지로 돌아가는 데  back button을 사용하는 것을 쓸모없게 함)

this.$router.replace({ name: 'EventDetails', params: { id: 3 } })

This will replace the current page I’m on with the EventDetails page, so the back button will no longer go back to the current page.  이렇게 하면 현재 있는 페이지가 EventDetails 페이지로 대체되므로 back button을 눌러도 더 이상 현재 페이지로 돌아가지 않습니다.

 

Navigating the History Stack

This might be useful if you’re building a native mobile app that doesn’t have the same browser bars. 

이는 동일한 브라우저 표시줄이 없는 기본 모바일 앱을 구축하는 경우 유용할 수 있습니다.

// Go forward a record
this.$router.go(1) 

// Go backward a record
this.$router.go(-1)

Sample Codes

https://github.com/Code-Pop/Touring-Vue-Router/tree/L6-end

GitHub - Code-Pop/Touring-Vue-Router