vue-route-back은 vue-route-back으로 어떻게 해야 하나요?

vue-route-back은 vue-route-back으로 어떻게 해야 하나요?

네, 간단하게 설명하자면:

나는 3페이지가 있다.

• 페이지 1 (홈)
• 2페이지 (메뉴)
• 페이지 3 (개요)

1페이지에는 a-가 있습니다.

<router-link to="/menu">

버튼을 클릭하면 "/menu"로 이동합니다.

현재 2페이지(메뉴)에는

<router-link to="/">

버튼을 클릭하면 이전 위치 "/" 페이지 1(홈)로 돌아갑니다.

단, 각 페이지에 대해 라우터를 위한 컴포넌트를 생성하여 이전 페이지로 '돌아가기'를 하고 싶지는 않습니다(100페이지가 있는 것처럼 라우팅에 많은 시간이 걸릴 수 있습니다).vue-router에서 이 작업을 수행할 수 있는 방법이 있습니까?와 비슷한window.history.back()

문서에서는 찾을 수 없기 때문에 이 방법을 알고 싶습니다.

잘 부탁드립니다!존.

Programmatic Navigation(프로그램 탐색)을 사용할 수 있습니다.돌아가려면 다음 명령을 사용합니다.

router.go(n) 

어디에n(돌아가기 위해) 긍정적일 수도 부정적일 수도 있습니다.이것은 와 같다.history.back()다음과 같은 요소를 사용할 수 있습니다.

<a @click="$router.go(-1)">back</a>

사용하다$router.back()vue-back에 대한 프로그래밍 방식으로 직접 돌아가거나 경로를 되돌아가다또는 컴포넌트 사용 템플릿에 있는 경우router.back().

이것은 나에게 시계처럼 작동한다.

methods: {
 hasHistory () { return window.history.length > 2 }
}

그런 다음 템플릿에서 다음을 수행합니다.

<button 
  type="button"    
  @click="hasHistory() 
    ? $router.go(-1) 
    : $router.push('/')" class="my-5 btn btn-outline-success">&laquo; 
  Back
</button>

사용하시는 경우Vuexhttps://github.com/vuejs/vuex-router-sync 를 사용할 수 있습니다.

메인 파일에서 초기화하기만 하면 됩니다.

import VuexRouterSync from 'vuex-router-sync';
VuexRouterSync.sync(store, router);

각 경로 변경은 갱신됩니다.route스테이트 오브젝트Vuex. 다음에 만들 수 있습니다.getter사용하다from루트 상태에 있는 오브젝트 또는state(getter를 사용하는 것이 좋지만, https://vuex.vuejs.org/en/getters.html),의 다른 이야기이기 때문에 간단히 말하면 다음과 같습니다).

this.$store.state.route.from.fullPath

그냥 넣어둘 수도 있어요.<router-link>컴포넌트:

<router-link :to="{ path: $store.state.route.from.fullPath }"> 
  Back 
</router-link>

따라서 위의 코드를 사용하면 이전 경로에 대한 링크가 동적으로 생성됩니다.

모바일 앱을 코딩하는 경우 UI 뒤로 버튼 또는 모바일 장치에서 제공하는 "뒤로" 버튼의 이력을 수용하는 통합 솔루션이 필요하기 때문에 이 질문에 대한 답변은 훨씬 더 까다로워집니다.

Ionic이나 Quasar와 같은 프레임워크는 모바일 장치의 Back Button 이벤트를 차단할 수 있습니다.Quasar는 이러한 이벤트를 처리하고 데스크톱 및 모바일 플랫폼 빌드에 대한 동작을 조정하므로 예를 들어 Cordova/Capacitor 모바일 앱 빌드는 "뒤로" 작업을 통해 대화상자를 닫거나 페이지를 뒤로 이동하거나 앱을 닫을 수 있습니다.

• 와 Quasar Backv-go-back

  • https://sysar.dev/vue-directions/go-back

• Ionic - Back 버튼과 Hardware Back 버튼

  • https://ionicframework.com/docs/api/back-button
  • https://ionicframework.com/docs/developing/hardware-back-button

짧고 실용적으로 나를 위해 일했다. (Nuxt.js)

<a @click="$router.back()"></>

Nuxt에서 하고 싶다면 이 방법이 효과가 있었다.

<nuxt-link :to="`${this.$nuxt.context.from.path}`" class="m-0 float-right btn btn-sm btn-sm btn-info">
   <i class="bi bi-plus-lg"></i> {{ $t('back') }}
</nuxt-link>

다른 솔루션은 vue-router-back-mixin을 사용하고 있습니다.

import BackMixin from `vue-router-back-mixin`

export default {
  ...
  mixins: [BackMixin],
  methods() {
    goBack() {
      this.backMixin_handleBack()
    }
  }
  ...
}

언급URL : https://stackoverflow.com/questions/48104842/how-can-i-go-back-route-back-on-vue-router