Nuxt - 이전 경로를 찾는 방법

Nuxt - 이전 경로를 찾는 방법

사용할 수 있습니다.this.$router.go(-1)사용자를 이전 루트로 리다이렉트합니다.다만, 리다이렉트 하기 전에, 이전의 루트에 관한 정보를 취득하는 방법을 이해할 수 없습니다.

기본적으로 먼저 이전 루트가 무엇이었는지 읽어보고 이전 루트가 같은 도메인에서 온 것임을 확인한 후 그 루트로 리다이렉트하거나 다른 작업을 수행합니다.

페이지에서 추가할 수 있습니다.asyncData접근할 수 있는 훅context에 이의를 제기하다.from속성:

asyncData({ from }) {
  console.log(from);
}

nuxt 컨텍스트에 액세스할 수 있는 nuxt 스태틱 방식에서ex: asyncData or middlewares:

asyncData({from}){
    // do something with from
}

그러나 vue 인스턴스에서 prev 경로를 가져오려면

this.$nuxt.context.from

그리고 기억해라from브라우저 기록에 사전 페이지가 없는 경우 정의되지 않을 수 있습니다.

이 정보를 바로 얻을 수 있는 방법은 없습니다.

사용할 수 있는 것은,beforeRouteEnter새로운 루트로 이동하기 전에 루트를 저장합니다.

그런 다음 이전 경로가 저장되어 있는지 확인하고 실행할 수 있습니다.this.$router.go(-1)

에서 라우터를 사용하는 경우history이 모드를 사용하고 싶을 수 있습니다.Historyvue-module이 이 정보를 가져오는 데 사용하는 api입니다.그러나 HistoryApi는 이것이 사생활에 큰 문제가 될 수 있기 때문에 이를 허용하지 않습니다.현재 탭에서 사용자의 전체 이력을 볼 수 있습니다.

[middleware]디렉토리에, 다음의 스크립트[routing.js]를 넣을 수 있습니다.

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function (context) {
  // current route
  console.log('route=', context.route.name)
  // previous route
  if (process.client) {
    const from = context.from
    console.log('from=', from)
  }
}

[nuxt.config.js]의 경우:

router: {
  ...
  middleware: 'routing'
},

클라이언트에서 현재 페이지를 변경할 때마다 이전 페이지를 보여주는 로그가 표시됩니다.아마 도움이 될 거야

컴포넌트/페이지에 Vue Navigation 가드를 구현하여 이를 실현할 수 있습니다.

<script>
export default {
  beforeRouteEnter(to, from, next) {
    console.log(from)
    next()
  },
  data() {
    return {
      ...
      prevRoute: null,
    }
  }
}
</script>

아니면 https://gist.github.com/zolotyx/b4e7fda234b3572fb7adaf11391f8eef#file-auth-js,이라는 사람이 리다이렉트 하는 데 도움이 되는 스크립트를 작성했습니다.

언급URL : https://stackoverflow.com/questions/55220132/nuxt-how-to-find-the-previous-route