[Vue] Router(2) 프로그래밍 방식 네비게이션

# router.push( )

다른 URL로 이동하는 메서드

새 항목을 histoy stack에 push하기 때문에 뒤로가기 가능

RouterLink를 클릭했을 때 내부적으로 호출되는 메서드

 

앞 글에서 했던 유저 프로필 페이지에서 홈으로 가는 버튼을 만들어보자

// userView.vue

// script
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const goHome = function() {
    router.push({name : 'home'})
}

// template
<button @click="goHome">HOME으로</button>

이런식으로 홈버튼이 생기며 클릭하면 홈으로 돌아감

뒤로가기가 가능하다!!

 

# router.replace( )

push와 다르게 history stack에 새로운 항목을 push하지 않음

→ 뒤로가기 불가능!

const goHome = function() {
    // router.push({name : 'home'})	// 얘는 push
    router.replace({name : 'home'})	// 얘는 replace
}

뒤로가기도 안되는데 어따쓰냐? → 로그인하고 뒤로가기 방지 등등..